jQuery: स्लाइड बाएं और दाएं स्लाइड

Question

मैंने jQuery में slideUp और slideDown देखा है। बाएं और दाएं स्लाइडिंग के लिए कार्यों/तरीकों के बारे में क्या?

Answer 1

आप jQuery UI में अतिरिक्त प्रभाव के साथ ऐसा कर सकते हैं: See here for details

त्वरित उदाहरण:

$(this).hide("slide", { direction: "left" }, 1000); 
$(this).show("slide", { direction: "left" }, 1000); 

Answer 2

आप कुछ jQuery UI की तरह फूला हुआ नहीं करना चाहते हैं, की कोशिश अपने कस्टम एनिमेशन: https://github.com/yckart/jquery-custom-animations

आपके लिए, blindLeftToggle और blindRightToggle उपयुक्त विकल्प है।

http://jsfiddle.net/ARTsinn/65QsU/

Answer 3

तुम हमेशा सिर्फ एक वर्ग, .addClass या .toggleClass जोड़ने के लिए jQuery का उपयोग कर सकते हैं। फिर आप अपनी सभी शैलियों को अपने सीएसएस में और अपनी स्क्रिप्ट से बाहर रख सकते हैं।

http://jsfiddle.net/B8L3x/1/

Answer 4

इस कोड को अच्छी तरह से काम करता है:। $ (document) .ready (function() { वर विकल्प = {}; $ ("# ग") छिपाने (); $ ("# डी")। छुपाएं(); $ ("# ए")। क्लिक करें (फ़ंक्शन() { $ ("# सी")। टॉगल ("स्लाइड", विकल्प, 500); $ ("# डी")। छुपाएं(); }); $ ("# बी")। क्लिक करें (Funct आयन() { $ ("# डी")। टॉगल ("स्लाइड", विकल्प, 500); $ ("# सी")।छिपाना(); }); }); एनवी { फ्लोट: बाएं; अधिकतम चौड़ाई: 300 पीएक्स; चौड़ाई: 300 पीएक्स; मार्जिन-टॉप: 100 पीएक्स; } आलेख { मार्जिन-टॉप: 100 पीएक्स; ऊंचाई: 100 पीएक्स; } # सी, # डी { पैडिंग: 10 पीएक्स; सीमा: 1 पीएक्स ठोस जैतून; मार्जिन-बाएं: 100 पीएक्स; मार्जिन-टॉप: 100 पीएक्स; पृष्ठभूमि-रंग: नीला; } बटन { सीमा: 2 पीएक्स ठोस नीला; पृष्ठभूमि-रंग: सफ़ेद; रंग: काला; पैडिंग: 10 पीएक्स; } हाय रजिस्टर 1



रजिस्टर 2

<article id="c"> 
     <form> 
      <label>User name:</label> 
      <input type="text" name="123" value="something"/> 
      <br> 
      <br> 
      <label>Password:</label> 
      <input type="text" name="456" value="something"/> 
     </form> 
    </article> 
    <article id="d"> 
     <p>Hi</p> 
    </article> 
</body> 

रेफरी ईरेंस: W3schools.com और jqueryui.com

नोट: यह एक उदाहरण कोड कोड की उचित कार्यप्रणाली प्राप्त करने के लिए सभी स्क्रिप्ट टैग जोड़ने के लिए मत भूलना।