JQuery

Question

के साथ क्षैतिज divs स्लाइडिंग इसलिए मैं जावास्क्रिप्ट और Jquery के लिए बहुत नया हूँ। मैं जो बनाना चाहता हूं वह एक दो स्तंभ पृष्ठ है जहां बाएं कॉलम पर लिंक क्षैतिज रूप से बाएं से दाएं स्लाइड में दाईं ओर स्लाइड करने के दाईं ओर एक div का कारण बनेंगे, और फिर क्लिक किए जाने पर दृश्य से बाहर स्लाइड करें। मुझे पता है कि मुझे स्लाइड टॉगल प्रभाव का उपयोग करने की आवश्यकता है, लेकिन मुझे इसे इस तरह कार्यान्वित करने में समस्या हो रही है कि प्रत्येक व्यक्तिगत लिंक अलग-अलग div को स्लाइड करने का कारण बनता है ... मैंने Google खोजों के माध्यम से प्राप्त कुछ jsfiddles को ट्विक करने का प्रयास किया है लेकिन जब जावास्क्रिप्ट की बात आती है तो मैं बहुत खो जाता हूं।

अभी तक यह केवल बेला मैं सफलतापूर्वक tweak कर लिया है ... http://jsfiddle.net/bridget_kilgallon/HAQyK/
लेकिन उन स्लाइड खड़ी है, और जब क्लिक सभी divs लोड।

यहाँ एक बेला मैं pagelayout मैं किसी भी जावास्क्रिप्ट के बिना करना चाहते हैं के लिए बनाया है, जिसका ... http://jsfiddle.net/bridget_kilgallon/NhanG/

कृपया मदद! :) -ब्रिजेट

Answer 1

दुर्भाग्य से jQuery के साथ कोई तैयार 'क्षैतिज' स्लाइड एनीमेशन नहीं है। जब तक आप jQuery UI जैसे बड़े पैकेज के साथ नहीं जाते। लेकिन मुझे नहीं लगता कि इसकी जरूरत है।

एकमात्र चीज जो आप चाहते हैं वह प्रभाव प्राप्त करने के लिए jQuery में animate() फ़ंक्शन का कुछ रचनात्मक उपयोग है।

मैं नहीं जानता था कि आप किस के साथ के बाद से वर्णन अस्पष्ट तो मैं पैनल स्विचिंग में मामूली असर के लिए 2 उदाहरण बनाया गया था जाना चाहता हूँ चाहते हैं:

http://jsfiddle.net/sg3s/rs2QK/ - बाएं से यह एक स्लाइड पैनल खुला और दाएं

http://jsfiddle.net/sg3s/RZpbK/ - पैनलों को बाएं से दाएं से दाएं और बाईं ओर बाएं खोलने के लिए नया खोलने के लिए स्लाइड करें।

संसाधन:

• http://api.jquery.com/animate/

आपने अभी तक वैसे भी नहीं शुद्ध सीएसएस के साथ ऐसा नहीं कर सकते। संक्रमण के लिए समर्थन बुनियादी है और केवल बहुत ही वेबकिट आधारित ब्राउज़र तक ही सीमित है। इसलिए जब से आपको jQuery की आवश्यकता होगी, इसका स्मार्ट उपयोग करें, लेकिन आपको अभी भी यह सुनिश्चित करने की आवश्यकता है कि आप जेएस का उपयोग करने से पहले सीएसएस के साथ जितना संभव हो उतना स्टाइल करें। ध्यान दें कि मैं अपने जेएस में किसी भी दृश्य स्टाइल/मैनिप्लेशंस का उपयोग नहीं करता हूं।

Answer 2

आप jQuery UI से effects मॉड्यूल का उपयोग कर सकते हैं और show('slide') का उपयोग कर सकते हैं। देखें http://jsfiddle.net/HAQyK/1/

Answer 3

जावास्क्रिप्ट का उपयोग किए बिना आप सीएसएस संक्रमण का उपयोग करने के लिए सीमित हैं, जहां उपलब्ध है। और जब ये बहुत प्रभावशाली हैं, वे विशेष रूप से महान नहीं हैं, जहां तक ​​मुझे अभी तक सशर्त एनीमेशन के लिए मिला है; वे मूल रूप से शुरुआती बिंदु से दूसरे बिंदु पर एनिमेट कर सकते हैं और फिर वापस (ब्राउज़र में उपलब्ध मूल ब्राउज़र ईवेंट के आधार पर), जेएस के साथ आप अतिरिक्त कक्षाओं को जोड़/निकाल सकते हैं और div तत्व आपके दिल की सामग्री के चारों ओर स्थानांतरित हो सकते हैं, लेकिन 'बस' सीएसएस के साथ नहीं (हालांकि मुझे इस पर गलत साबित होना अच्छा लगेगा)।

सबसे अच्छा मैं साथ आने के लिए, अब तक कर लिया है

, है:

#left { 
    float:left; 
    width:200px; 
} 
.right { 
    height: 0; 
    background-color: #fff; 
    margin-left: 205px; 
    overflow: hidden; 
    -webkit-transition: all 1s linear; 
    -ms-transition: all 1s linear; 
    -o-transition: all 1s linear; 
    -moz-transition: all 1s linear; 
    transition: all 1s linear; 
} 
.right:target { 
    display: block; 
    height: 5em; 
    background-color: #ffa; 
    -webkit-transition: all 1s linear; 
    -ms-transition: all 1s linear; 
    -o-transition: all 1s linear; 
    -moz-transition: all 1s linear; 
    transition: all 1s linear; 
}​ 

JS Fiddle demo।

और यह पक्ष से स्लाइड नहीं करता है (हालांकि आप इसे कर सकते हैं यदि आप चाहते हैं) क्योंकि यह अच्छा नहीं दिख रहा था, सामग्री को फिर से रिफ्लो करने के बाद जो तत्व की चौड़ाई बदल गई थी।

---

संपादित क्योंकि मुझे लगता है कि मैं मूल प्रश्न के एक हिस्से की गलत व्याख्या की है हो सकता है:

... मैं बिना किसी भी जावास्क्रिप्ट

चाहें मामले जा रहा है यही कारण है कि , और टिप्पणी (नीचे) यह सुझाव देती है कि jQuery का एक ठीक विकल्प है, यह प्रदर्शन के रूप में सार्थक हो सकता है:

​$('#left a').click(
    function(){ 
     var div = $('div').not('#left').eq($(this).index('#left a')); 
     var others = $('div[data-visible="true"]'); 
     others.each(
      function(){ 
       $(this).animate({ 
        'left' : '2000px' 
       },1000,function(){ 
        $(this).removeAttr('style data-visible'); 
       }); 
      }); 
     if (div.attr('data-visible')) { 
      div.animate({ 
       'left' : '2000px' 
      },1000,function(){ 
       $(this).removeAttr('style data-visible'); 
      }); 
     } 
     else { 
      div.animate({ 
       'left' : '210px' 
      },1000).attr('data-visible',true); 
     } 
    });​​​​​​​​ 

JS Fiddle demo।

संदर्भ:

• animate()।
• attr()।
• [attribute="value"] selector।
• click()।
• each()।
• eq()।
• index()।
• not()।
• removeAttr()।

Answer 4

यहां वह कोड है जिसे आप चाहते हैं। यह साबित हुआ है कि आईई, सफारी, क्रोम, फ़ायरफ़ॉक्स, आदि पर काम करता है

यहां HTML भाग है।

<div id="slide-wrap" style="width:1000px; height:200px; overflow:hidden; padding:0 auto;"> 
     <div id="inner-wrap" style="float:left;"> 
      <!-- 'Put Inline contains here like below.' --> 
      <div class='containBox' style="width:250px; height:100%; float:left; display:inline-block;"></div> 
      <!-- ... --> 
      <div class='containBox' style="width:250px; height:100%; float:left; display:inline-block;"></div> 
      <!-- 'Put Inline contains here like above.' --> 
     </div> 
     <div style="display: block; width:40px; height:60px; position: absolute; margin-left:0px; margin-top:40px"> 
      <img id='scroll_L_Arrow' src='../assets/img/l-arrow.png' onclick="scrollThumb('Go_L')"/> 
     </div> 
     <div style="display: block; width:40px; height:60px; position: absolute; margin-left:960px; margin-top:40px"> 
      <img id='scroll_R_Arrow' src='../assets/img/r-arrow.png' onclick="scrollThumb('Go_R')"/> 
     </div> 
    </div> 

जावास्क्रिप्ट फ़ंक्शन में jQuery भाग यहां है।

 function scrollThumb(direction) { 
     if (direction=='Go_L') { 
      $('#slide-wrap').animate({ 
       scrollLeft: "-=" + 250 + "px" 
      }, function(){ 
       // createCookie('scrollPos', $('#slide-wrap').scrollLeft()); 
      }); 
     }else 
     if (direction=='Go_R') { 
      $('#slide-wrap').animate({ 
       scrollLeft: "+=" + 250 + "px" 
      }, function(){ 
       // createCookie('scrollPos', $('#slide-wrap').scrollLeft()); 
      }); 
     } 
     } 

तीरों को छिपाने के लिए कृपया यहां देखें। Detect end of horizontal scrolling div with jQuery

Answer 5

$(function() { 
$("#wizardV").steps({ 
    headerTag: "h2", 
    bodyTag: "section", 
    transitionEffect: "slideLeft", 
    stepsOrientation: "vertical" 
}); 
}); 

* // जादूगर यहाँ अपने सभी सामग्री