如何启动/停止/重新启动jQuery动画

问题描述：

我有以下功能，当我调用时显示一条消息给用户一段时间（在我的情况下为5秒）。在此期间，如果我再次调用该函数来显示另一条消息，实际上它应该隐藏，然后再以新消息再出现5秒。如何启动/停止/重新启动jQuery动画

下面我的代码会发生什么，我称之为显示消息的函数。然后，让我们在第4秒钟说，我再次打电话来显示另一条消息，新消息显示1秒。

我需要以某种方式 - 重置 - 时间，但无法弄清楚如何。试图停止动画，检查元素是否可见并隐藏它，如果是的话，还有很多其他的东西。我相信解决方案是一个简单的链接问题，但不能正确解决。所以任何帮助将不胜感激！

function display_message(msgType, message) { 

    var elem = $('#ur_messagebox'); 

    switch (msgType) { 
     case 'confirm': 
      elem.addClass('msg_confirm'); 
      break; 

     case 'error': 
      elem.addClass('msg_error'); 
      break; 
    } 

    elem.html(message); 
    elem.show().delay(5000).fadeOut(1000); 
}

在此先感谢...

答

总之，你不能使用.delay()为你想要的。这只是一个关于下一个队列项目，you can see the source here为setTimeout()包装，重要的部分：

return this.queue(type, function() { 
     var elem = this; 
     setTimeout(function() { 
      jQuery.dequeue(elem, type); 
     }, time); 
    });

所以这只是排队setTimeout()被执行时，从队列在队列中的下一个项目并执行它。所以，发生了什么事是你添加一个延迟，甚至与.stop(true)或.clearQueue()，当你排队.fadeOut()后你补充说回相同fx队列，所以当setTimeout()结束在5秒钟内，它的抓新的淡出排队并执行它。

你需要setTimout()手动清除，因为jQuery的核心没有这个内置的，是这样的：

function display_message(msgType, message) { 
    var mb = $('#ur_messagebox') 
      .addClass(msgType === 'confirm' ? 'msg_confirm' : 'msg_error') 
      .html(message) 
      .stop(true, true).fadeIn(); 
    if(mb.data('delay')) clearTimeout(mb.data('delay')); 
    mb.data('delay', setTimeout(function() { mb.fadeOut(1000); }, 5000)); 
}

You can see a working demo here

完美答案！非常感谢你！ – 2010-05-24 14:21:53

答

试试这个。

elem.stop().show().delay(5000).fadeOut(1000);

这不起作用。之前尝试过。显示新的消息，但在第一条消息的5秒钟内剩下的一段时间内。 – 2010-05-21 18:25:12

答

我得到CSS冲突，因为你永远不添加其他之前删除味精类，所以我清除那些除了elem.removeClass('msg_confirm msg_error');来解决这个问题：

function display_message(msgType, message) { 

    var elem = $('#ur_messagebox'); 
    elem.removeClass('msg_confirm msg_error'); 

    switch (msgType) { 
     case 'confirm': 
      elem.addClass('msg_confirm'); 
      break; 

     case 'error': 
      elem.addClass('msg_error'); 
      break; 
    } 

    elem.stop().css({opacity:1}).clearQueue(); 
    elem.html(message); 
    elem.show().delay(5000).fadeOut(1000); 
}

与 elem.stop().css({opacity:1}).clearQueue();

所以我停止在添加消息并重新启动队列之前，重置不透明度以防止它在淡出过程中并清除队列。我测试了这个，它应该适合你。

不！这似乎也不起作用。我越深入研究这个问题，我越会遇到更多有延迟功能问题的人。在这里阅读评论http://api.jquery.com/delay/ – 2010-05-21 19:27:42

啊，有趣的是，我只测试了某些情况，但它并不适用于所有情况。将继续摆弄。 – mVChr 2010-05-21 19:45:39

答

我重新启动动画是这样的：（但不知道它是否完全正确）

$（element）.stop（）。clearQueue（）; （元素）.delay（20）.animate（{...}）;

答

由于Nick指出：

总之，你不能使用.delay（）你想要的东西。

但有一个简单的解决方法：而不是使用.delay(x)只是使用.fadeTo(x,1)。

基本上，这会褪色到完全不透明，但由于消息框已经处于完全不透明状态，因此除了延迟以下动画之外，此操作不会执行任何操作，只能延迟x毫秒。优点是.fadeTo()可以使用.stop(true)停止/中止。

答

如果使用jQuery，只是再次重新启动前完成当前的动画：

tooltip.finish();// set a defined start for animation 
tooltip.show(); 
tooltip.delay(4000).fadeOut(1500);

如何启动/停止/重新启动jQuery动画

相关推荐