Bu garip jQuery .animate() gecikmesi nasıl önlenir?

Question

bakınız demo: jsFiddle

• Ben 'gösterisi'/
• Her şey gayet iyi çalışıyor 'iptal' tıklandığında getirildiğinde basit bir form var, ancak sen tıklarsanız şeklidir kısa bir süre sonra 'iptal' ortaya çıktığında, animasyonun'a bile başlamadan 2-3 saniye gecikmesi var.
• 'İptal' i tıklamadan önce birkaç saniye beklerseniz bu olmaz. Tüm test edilmiş tarayıcılarda gecikme (örn., Ff, krom) meydana gelir.

1. Bu gecikmeye ne neden olabilir ve nasıl önlenebilir? 2. Bu animasyon dizisini kodlamanın daha iyi bir yolu var mı? Bu gecikmelerden sakınmak için daha iyi bir yol var mı?

HTML:

<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: En hareketlendirmek aramadan önce

$("#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

kuyruğunu whe temizlemek için emin olun n stop() ile yeni bir animasyon başlayan: gecikmeye neden Neler

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

uzun 2 saniyelik animasyon $("#newResForm").animate({ opacity: 100 },2000) henüz tamamlanmadığını gerçektir. JQuery, animasyonları varsayılan olarak bir kuyruğa koyar ve bir sonraki başlamadan önce bitmesini bekler. Sırayı, iki birbiriyle çelişen animasyonunuz varsa (açık ve yakın animasyon veya fare/fare animasyonu gibi) yararlı olan stop() ile temizlersiniz. Aslında, başka bir yerde meydana gelmiş olabilecek önceki animasyonlarla sıraya girmelerini istediğinizi bilmedikçe, tüm animasyon zincirlerinize stop() ile başlamak iyi bir uygulamadır.

Daha gelişmiş konulara giriş yaparak, farklı sıralar bile ekleyebilirsiniz; örneğin, hover animasyonlarınız ve genişletme/daraltma animasyonlarınız, stop() amaçları için ayrıca ele alınır. Daha fazla ayrıntı için http://api.jquery.com/animate/ numaralı telefondan queue seçeneğini (bir dize verildiğinde) görün.

Answer 2

.stop() ekleyin:

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() kullanmayı deneyin: şeylerin

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

Çift. İlk olarak hareket halinde olduğunu görmek için bu JSFiddle adresine bakın.

Elinizdeki sorun, animasyondaki solgunluğun 2 saniye sürmesidir. Yani 2 saniye içinde kapattığınızda bir gecikme yaşarsınız.

Gecikme olmadığından emin olmak için zamanlamalarınızı yeniden ayarladı.Onları beğenip beğenmediğinizi ve istediğiniz gibi değiştirebileceğinizi görün.

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'); 
}