jQuery animate（）在其完成之前再次觸發時「閃爍」

以下是演示問題的JSFiddle ... http://jsfiddle.net/L2NBP/5/由於顯而易見的原因，此代碼是我的實際代碼的簡化版本，如下所示。jQuery animate（）在其完成之前再次觸發時「閃爍」

CSS

#frame { left:0; position:absolute; width:190px; } 
.layer { background:#FFF; position:absolute; right:0; top:0; width:190px; } 
#process { z-index:1; } 
#contact { z-index:2; } 
#message { z-index:3; }

HTML

<div id="frame "> 
    <div id="process" class="layer">Processing...</div> 
    <div id="contact" class="layer"># Results Found</div> 
    <div id="message" class="layer">Results Updated</div> 
</div> 
<button onclick="javascript:ajaxMessage();">Click Here</button>

function ajaxMessage(){ 
    // if($('#message').is(":animated")) return; 
    $('#contact').fadeOut('slow',function(){ 
     $('#message').fadeIn('slow') 
         .animate({opacity:1.0},1000) 
         .fadeOut('slow',function(){ 
          $('#contact').fadeIn('slow'); 
         }); 
    }); 
}

細節

我有一個表單提交給AJAX .load()。我正在使用UI滑塊http://jqueryui.com/demos/slider/作爲輸入。我使用範圍選項，並在表單中有幾個輸入「滑塊」，所以AJAX可能會被稱爲每秒多次。完成時，我正在顯示成功消息。該消息使用.animate() 進行動畫，如您在上面的JS Fiddle鏈接中看到的。

問題是，在完成第一個動畫之前，顯示消息的函數將被多次調用。發生這種情況時，用戶停止修改表單值之後，動畫會長時間「閃爍」。我試過這個... if($('#message').is(":animated")) return; ...但它仍然不能很順利地工作。基本上我需要弄清楚如何動態地延長動畫的持續時間，或者至少讓它看起來像那樣工作。或者延遲成功消息，直到用戶對錶單進行了最後一次修改爲止......例如：自用戶進行更改後，消息不會顯示2秒過去。

任何想法？

接受的答案

行動

接受的答案... http://jsfiddle.net/L2NBP/7/

在http://jsfiddle.net/L2NBP/5/與此相比，原來要看到不同點擊按鈕多次在1-2秒，手錶按鈕右側的響應文本。

來源

2012-07-05 Kirkland

你爲什麼要做'fadeIn（'slow'）。animate（{opacity：1.0}，1000）'？ – 2012-07-05 11:29:31

在我的實際代碼中，動畫的持續時間更長。我縮短了它以節省時間，同時測試......無論動畫的持續時間如何，它都具有相同的不良效果。 – Kirkland 2012-07-05 17:27:33

如果我有你的問題的權利，

您應該使用stop()

這樣，

$('#message').stop().fadeIn('slow').animate({opacity:1.0},1000).fadeOut('slow',function(){ 
     $('#contact').fadeIn('slow'); 
});

而且，做了第二次的動畫，一個完成時，

var msg = $('#message'); 
msg.stop().fadeIn('slow',function(){ 
    msg.animate({opacity:1},1000,function(){ 
     msg.fadeOut('slow',function(){ 
      $('#contact').fadeIn('slow'); 
     }) 
    }) 
});

來源

2012-07-05 11:31:12 Jashwant

這樣做了。感謝您的幫助 - 我真的很感謝它！ – Kirkland 2012-07-05 17:21:51

jQuery animate（）在其完成之前再次觸發時「閃爍」

回答

相關問題