Jquery slideToggle प्रभाव चिकनी नहीं

Question

<div class="searchDiv"> 
    <div class="row"></div> 
    <div class="row"></div> 
    <div class="row"></div> 
    <div class="row"></div> 
</div> 

मैं कक्षा searchDiv जो शुरू में छिपा हुआ है display:none उपयोग करने के साथ div पर $("div.searchDiv").slideToggle("slow"); कॉल करने के लिए कोशिश कर रहा हूँ। कक्षाके साथ उन 4 div के अंदर कुछ div तत्व फिर से हैं। इससे कोई फर्क नहीं पड़ता कि तत्वों को मुख्य div searchDiv के अंदर कैसे रखा जाता है क्योंकि मुझे लगता है कि मुख्य div के अंदर रखे तत्वों के लिए टॉगल प्रभाव चिकनी नहीं है।

Answer 1

विचार अगर कुछ चिकना दिखता है या नहीं, तो यह विचार करने पर आधारित राय और अलग है। यदि आप धीमी गति से उपयोग कर रहे हैं तो इसे 200 मिलीसेकंड का मूल्य दिया जाता है।

स्लाइड टॉगल। https://api.jquery.com/slideToggle/

दुर्घटना मिलीसेकंड में दी जाती है; उच्च मान धीमे एनिमेशन को इंगित करते हैं, तेज़ नहीं। स्ट्रिंग्स 'फास्ट' और 'धीमी' क्रमश: 200 और 600 मिलीसेकंड की अवधि को इंगित करने के लिए आपूर्ति की जा सकती हैं।

डिफ़ॉल्ट easing स्विंग है और मेरे लिए, यह किसी न किसी लग रहा है। मैं आसान बनाने के लिए रैखिक कोशिश करने का सुझाव दूंगा।

यदि स्विंग या रैखिक आपके लिए पर्याप्त चिकनी नहीं है, तो आप jQuery UI का उपयोग और शामिल कर सकते हैं और अन्य विकल्पों में से एक का उपयोग कर सकते हैं। आपको वह आसान लग सकता है जो आपको लगता है कि आपको जितना आसान हो उतना आसान काम करता है।
http://jqueryui.com/resources/demos/effect/easing.html

$('.searchDiv').slideToggle(2000,"linear", function() { 
    // actions to do when animation finish 
}); 

Answer 2

आप अपने पंक्तियों को चौड़ाई जोड़ने की जरूरत है।

jQuery आपके छिपे हुए div के आयामों को तब तक नहीं जानता जब तक कि यह प्रदर्शित न हो जाए। तो जब इसे क्लिक किया जाता है तो इसे वास्तव में इसे बदलने के पहले इसे मापने के लिए स्थिति से बाहर खींचता है। यह अक्सर कुछ उछाल पैदा करने का दुष्प्रभाव होता है। तत्व पर चौड़ाई को सेट करने से jQuery को स्थिति से बाहर खींचने से रोकता है।

Answer 3

मुझे पता है कि यह पुराना है, लेकिन अगर यह किसी और की मदद करता है, तो मुझे एक समस्या मिली जब मैंने टॉगल तत्व पर न्यूनतम ऊंचाई वाली संपत्ति सेट की, एक निश्चित ऊंचाई पर सेट करने के लिए यह मेरे लिए हल किया गया।

Answer 4

मुझे एक ही समस्या थी। दो चीजें मेरे लिए तय की गईं।

1. मुझे अपने तत्व पर मौजूदा संक्रमण सीएसएस को हटाने की आवश्यकता है।
2. मैं अपने "क्लिक बार" अंदर एक तत्व था (h2) कि मार्जिन को 0 पर सेट की जरूरत है (यह कर रहा था अन्य तत्वों गलत सीमा को चेतन - अंत में एक अजीब तस्वीर के कारण)