jQuery停止动画

Question

所以我有一个新闻项目的列表，有AJAX控件来创建，编辑或删除。在其中一项行动中，顶部会显示一条小小的信息，确认他们做了什么。因此，如果他们添加新帖子，它会弹出“新增新闻：标题”。它滑落，然后在10秒后滑回。问题是，如果在10秒钟之前完成多个动作，则会多次动画。

例如： 创建标题为“one”的消息 - 消息关闭。

4秒后，创建标题为“two”的新闻 - 消息下来。

6秒后，“one”的消息向上滑动，然后又过了4秒，“two”的消息向上滑动。

我希望它只能滑动一次，因此您可以排列尽可能多的动作，然后在最后一个动作10秒后，它会向上滑动。

这里就是我的了：

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

Answer 1

我会做的是使用的setTimeout ，并且每次完成一项新操作时，清除先前的超时并创建一个新的超时。

喜欢的东西：

var timerID; 

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

Answer 2

听起来你遇到与动画队列中发出建立。你有没有试过jQuery.stop（）？

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

为了避免这种情况，可能是更好的做法，更好，如果你使用的jQuery.queue（）/ jquery.dequeue（）函数适用于：http://api.jquery.com/queue/

Answer 3

您可以检查是否#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