jQuery

Question

में झटकेदार एनीमेशन के साथ समस्या मैंने इसे कई बार बिना किसी समस्या के किया है लेकिन किसी कारण से यह Here पर एक समस्या है। स्लाइड डाउन सामान्य रूप से काम करने (1/3) और अचानक अचानक झटके से शुरू हो जाएगी और एनीमेशन खत्म कर देगा। स्लाइडिंग ठीक काम करता है। स्लाइडडाउन(), स्लाइड टॉगल और .animate() के लिए यह मामला अजीब बात है अगर मैं एनिमेट फ़ंक्शन में अस्पष्टता को टॉगल करता हूं तो यह झटका नहीं देता है लेकिन मेरा टेक्स्ट संक्षिप्त रूप से रंग बदल देगा।

HTML:

<h2>Phthalate Free: </h2><div class="yamikowebsToggler"> 
    <p> 
    Dibutyl Phthalate is linked to cancer and is present in nail polish, perfume, soft plastics and skin care products. 
    </p></div> 

सीएसएस: मैं किसी और को पढ़ रहे थे कि मार्जिन झटका लेकिन यह नहीं है की मदद करने का कारण बन सकती

h2{color:#76DEFC; margin:0px;} 
    .yamikowebsToggler{margin:0px;} 
    p{margin:0px; color;#000000;} 

jQuery:

$(document).ready(function(){ 
    $(".yamikowebsToggler").fadeOut(0); 
    $("h2").click(function() 
    { 
     $(this).next(".yamikowebsToggler").stop(true, true).animate(
     { height: 'toggle' }, 
     { 
      duration: 1000, 
     }); 
    }) 
}); 

Answer 1

मुझे समाधान मिला। मेरे कोड के साथ कुछ भी नहीं था लेकिन jquery में एक बग था। jquery को विरासत में होने पर ऊंचाई प्राप्त करने में परेशानी होती है क्योंकि जब ऊंचाई प्राप्त हो रही है तो तत्व छिपा हुआ है। जब तत्व छिपे हुए हैं वे इसे ठीक करने के

position: absolute; 
visibility: hidden; 

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

style="height: <height in px>;" 

तत्वों को टॉगल करने के लिए बस लाइन में किया।

Answer 2

आप बढ़ती की कोशिश की है अपने {duration: ...}? साथ ही, आप अंतर्निहित jQuery फ़ंक्शन .slideToggle() का उपयोग कर सकते हैं।

Answer 3

मुझे पता है कि यह उत्तर के रूप में चिह्नित है, लेकिन इस समस्या पर एक अद्यतन प्रदान करना चाहते हैं।

इसी मुद्दे टिकट यहाँ है: http://bugs.jquery.com/ticket/4541

हालांकि यह कोर devs द्वारा बंद कर दिया गया है, और लगता है जब तक कि वहाँ एक पैच कोई प्रदर्शन खामियों है कि जैसे कि यह तय नहीं किया जाएगा।

इस बीच, यदि आप अभी भी ऐसा करने के लिए jQuery का उपयोग करना चाहते हैं, तो आप या तो उस तत्व की ऊंचाई या चौड़ाई निर्धारित कर सकते हैं जिसे आप स्लाइड करने का प्रयास कर रहे हैं या स्लाइडडाउन। इसे "पिक्सेल" इकाई में नहीं होना चाहिए, यह प्रतिशत में भी हो सकता है।

Answer 4

मेरे पास एक समान समस्या थी जब विभाजन को 100% से 0% चौड़ाई तक एनिमेट किया गया था।

क्या हो रहा था कि एनीमेशन की शुरुआत में विभाजन कुछ कारणों से 110% की तरह व्यापक हो गया।

वैसे भी मुझे पता चला कि समाधान विशिष्ट विभाजन पर सीएसएस शैलियों में max-width: 100%; जोड़ना था।

बस सोचा कि मैं इसे यहां पोस्ट करूंगा क्योंकि मैं यहां इस मुद्दे पर एक फिक्स ढूंढ रहा हूं। :)