इस अजीब jQuery को कैसे रोकें .animate() अंतराल?

Question

डेमो देखें: jsFiddle

• मैं एक सरल रूप है कि जब 'शो'/'रद्द करें'
• सब कुछ ठीक काम करता है पर क्लिक टॉगल किया जा रहा है, लेकिन यदि आप क्लिक करें 'रद्द करें' के बाद शीघ्र ही रूप है पता चला है कि एनीमेशन भी से शुरू होने से पहले एक अच्छा 2-3 सेकंड अंतराल है।
• ऐसा नहीं होता है यदि आप 'रद्द करें' पर क्लिक करने से पहले कुछ सेकंड प्रतीक्षा करते हैं।
• अंतराल सभी परीक्षण किए गए ब्राउज़र (यानी, एफएफ, क्रोम) में होता है।

1. क्या इस अंतराल का कारण बन सकता है और यह कैसे रोका जा सकता है?

2. वहाँ एनिमेशन के इस क्रम कोडिंग के लिए एक बेहतर तरीका यह है कि किसी भी अंतराल रोक सकती है?

एचटीएमएल:

<div id="newResFormWrap"> 
    <form id="newResForm" action="" method="post" name="newRes"> 
     <div id="newResFormCont"> 
      <h3>title</h3> 
      <p>form!</p> 
      <div class="button" id="cancelNewRes">Cancel</div> 
     </div> 
    </form> 
</div> 
<div class="button" id="addRes">show</div> 

jQuery:

$("#newResForm").css({opacity: 0}); 

$("#addRes").click(function() { 
    toggleNewRes() 
}); 
$("#cancelNewRes").click(function() { 
    toggleNewRes() 
}); 

//toggleNewRes 
function toggleNewRes() { 
    if ($("#newResFormWrap").css('display') == "none") {//if hidden 
     $("#addRes").animate({ opacity: 0 }, 'fast', function() { 
      $("#newResFormWrap").toggle('fast', function(){ 
       $("#newResForm").animate({ opacity: 100 },2000); 
      }); 
     }); 
    } else { //if visible 
     $("#newResForm").animate({ opacity: 0 }, 100,function() { 
      $("#newResFormWrap").toggle('fast', function(){ 
       $("#addRes").animate({ opacity: 100 }); 
      }); 
     }); 
    } 
} 

Answer 1

कतार whe स्पष्ट करने के लिए सुनिश्चित करें n stop() के साथ एक नई एनीमेशन शुरू करने:

$("#newResForm").stop().animate({ opacity: 0 }, 100,function() { 
     $("#newResFormWrap").toggle('fast', function(){ 
      $("#addRes").animate({ opacity: 100 }); 
       // ... 

क्या अंतराल पैदा तथ्य यह है कि अपने लंबे 2-सेकंड एनीमेशन $("#newResForm").animate({ opacity: 100 },2000) अभी तक समाप्त नहीं हुआ है। JQuery डिफ़ॉल्ट रूप से एनीमेशन को कतार में रखता है, जो अगले शुरू होने से पहले खत्म होने की प्रतीक्षा करता है। आप stop() के साथ कतार साफ़ करते हैं, जो विशेष रूप से उपयोगी है यदि आपके पास दो विरोधाभासी एनिमेशन हैं (जैसे खुली और करीबी एनीमेशन, या माउसओवर/माउसआउट एनीमेशन)। वास्तव में आपको stop() के साथ अपनी सभी एनीमेशन श्रृंखलाओं को शुरू करने के लिए एक अच्छा अभ्यास मिल सकता है जबतक कि आप नहीं जानते कि आप चाहते हैं कि वे उन्हें पहले से होने वाले पूर्व एनिमेशन के साथ कतारबद्ध करें।

अधिक उन्नत विषयों में पहुंचना, आप विभिन्न कतारों का नाम भी दे सकते हैं, उदाहरण के लिए stop() के प्रयोजनों के लिए आपके होवर एनिमेशन और आपके विस्तार/पतन एनिमेशन का अलग से इलाज किया जाता है। अधिक जानकारी के लिए विकल्प (जब एक स्ट्रिंग दी गई हो) http://api.jquery.com/animate/ पर देखें।

Answer 2

जोड़े .stop() से पहले अपने चेतन कहता है:

function toggleNewRes() { 
    if ($("#newResFormWrap").css('display') == "none") {//if hidden 
     $("#addRes").stop().animate({ opacity: 0 }, 'fast', function() { 
      /... 
     }); 
    } else { //if visible 
     $("#newResForm").stop().animate({ opacity: 0 }, 100,function() { 
      /... 
     }); 
    } 
} 

Answer 3

stop() उपयोग करने के लिए प्रयास करें:

Here is jsfiddle.

if ($("#newResFormWrap").is(':visible')) {//this way is eaiser to check 
    $("#addRes").stop(true,false).animate({ opacity: 0 }, 'fast', function() { 
     $("#newResFormWrap").toggle('fast', function(){ 
      $("#newResForm").animate({ opacity: 100 },2000); 
     }); 
    }); 
} 

Answer 4

चीजों की युगल। इसे क्रिया में देखने के लिए पहले यह JSFiddle देखें।

आपके पास समस्या यह है कि एनीमेशन में आपकी फीका 2 सेकंड लगती है। तो जब आप इसे 2 सेकंड के भीतर बंद करते हैं तो आपको देरी का अनुभव होता है।

मैंने यह सुनिश्चित करने के लिए आपके समय को पुन: परिशोधित किया कि कोई देरी नहीं है।देखें कि क्या आप उन्हें पसंद करते हैं और उन्हें पसंद करने के लिए स्वतंत्र महसूस करते हैं।

if ($("#newResFormWrap").css('display') == "none") {//if hidden 
    $("#addRes").animate({ opacity: 0 }, 'fast', function() { 
     $("#newResFormWrap").toggle(0, function(){ 
      $("#newResForm").animate({ opacity: 100 },400); 
     }); 
    }); 
} else { //if visible 
    console.log('click'); 
    $("#newResForm").animate({ opacity: 0 }, 0, function() { 
     console.log('animated'); 
     $("#newResFormWrap").toggle(0) 
    }); 
    $("#addRes").animate({ opacity: 100 }, 'fast'); 
}