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的可见性来检查是否已打开#ajax_message，停止（）以便它不再滑动，.append（）新消息到当前消息，然后再次执行延迟的幻灯片

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

jQuery停止动画

3 个答案: