jQuery停止動畫

所以我有一個新聞項目的列表，有AJAX控件來創建，編輯或刪除。在其中一項行動中，頂部會顯示一條小小的信息，確認他們做了什麼。因此，如果他們添加新帖子，它會彈出「新增新聞：標題」。它滑落，然後在10秒後滑回。問題是，如果在10秒鐘之前完成多個動作，則會多次動畫。jQuery停止動畫

例如：創建標題爲「one」的消息 - 消息關閉。

4秒後，創建標題爲「two」的新聞 - 消息下來。

6秒後，「one」的消息向上滑動，然後又過了4秒，「two」的消息向上滑動。

我希望它只能滑動一次，因此您可以排列儘可能多的動作，然後在最後一個動作10秒後，它會向上滑動。

這裏就是我的了：

$('#ajax-message').html('Added News: ' + title); 
$('#ajax-message').slideDown('1000').delay('10000').slideUp('1000');

來源

2011-05-03 CrazeD

您可以請發佈一些代碼（也許在jsfiddle.net）與困擾的代碼，所以我們可以準確地幫助你？ – Dutchie432 2011-05-03 19:49:33

我會做的是使用的setTimeout ，並且每次完成一項新操作時，清除先前的超時並創建一個新的超時。

喜歡的東西：

var timerID; 

... 
// when an action occurs 
clearTimeout(timerID); 
timerID=setTimeout(function(){ 
    $('#ajax-message').slideUp('1000'); 
},10000);

來源

2011-05-03 19:53:41

這有效，除非它不正確地重新啓動超時。例如，如果我創建了一條新聞，然後在7秒後再創建另一條新聞，則該消息只會持續3秒。 – CrazeD 2011-05-03 20:10:34

我錯過了setTimeout中的時間參數。 – 2011-05-03 20:16:20

是的，我已經加入了 - 但它仍然發生。 – CrazeD 2011-05-03 21:06:26

聽起來你遇到與動畫隊列中發出建立。你有沒有試過jQuery.stop（）？

http://api.jquery.com/stop/

爲了避免這種情況，可能是更好的做法，更好，如果你使用的jQuery.queue（）/ jquery.dequeue（）函數適用於：http://api.jquery.com/queue/

來源

2011-05-03 19:52:17 chrisjlee

會停止取消延遲嗎？我在搜索中發現了混合報告。 – 2011-05-03 19:59:04

我不完全肯定，但我不認爲它應該：http://jsfiddle.net/UrCZH/ – chrisjlee 2011-05-03 20:36:25

您可以檢查是否#ajax_message是通過檢查它的知名度，停（開），所以它不會再次效果基本show，.append（）新的消息，目前的消息，然後執行延遲效果基本show再次

if($('#ajax_message').is(':hidden')) 
{ 
    $('#ajax_message').html('AddedNews'+title).slideDown('1000').delay('10000').slideUp('1000'); 
} 
else 
{ 
    //is opened 
    $('#ajax_message').stop().append('<br />AddedNews'+title).delay('10000').slideUp('1000'); 
}

（未測試的代碼）

編輯： 改變了測試可視性的方法。謝謝@kingjiv

來源

2011-05-03 19:59:39 Andre

你可以使用is（「：hidden」）而不是檢查CSS中的顯示。 'if（$（'＃ajax_message'）。（'：hidden'））' – 2011-05-03 20:03:20

jQuery停止動畫

回答

相關問題