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

Question

我有一个函数，当我调用它时，会在一定时间内向用户显示消息（在我的例子中为5秒）。在这个“时间段”内，如果我再次调用该函数以显示另一条消息，它应该隐藏，然后重新出现新的消息并持续5秒。

但是，在我的下面代码中发生了什么，我调用该函数来显示消息。然后，假设在第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);
}

thanks in advance...

- Subliminal Hash

Answer 1

简而言之，你不能使用 .delay() 来实现你想要的功能。它只是一个包装器，将 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));
}

您可以在此处查看实际演示

- Nick Craver

Answer 2

正如Nick所指出的：

简而言之，你不能使用 .delay() 来实现你想要的效果。

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

基本上，这将淡入到完全不透明，但由于消息框已经完全不透明，这除了延迟后续动画 x 毫秒之外什么也不做。而且优点是 .fadeTo() 可以使用 .stop(true) 停止/中止。

- Ignitor

Answer 3

试试这个。

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

- ground5hark

---

这个不起作用。之前尝试过了。新消息会被显示出来，但只会在第一条消息剩余的5秒内显示。 - Subliminal Hash

Answer 4

我遇到了 CSS 冲突，因为在添加其他类之前你从未删除 msg 类，所以我使用 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();，我停止了动画，在重置不透明度的情况下，清除队列，然后添加消息并重新启动队列。我已经测试过了，这应该对你有用。

- mVChr

---

不行！这似乎也不起作用。我越深入研究，就越发现更多人在使用延迟函数时遇到问题。请阅读此处的评论：http://api.jquery.com/delay/ - Subliminal Hash

啊，有趣，我只测试了某些情况，但并不适用于所有情况。我会继续尝试。 - mVChr

Answer 5

我是这样重新启动动画的：（不确定是否完全正确）

$(element).stop().clearQueue();

$(element).delay(20).animate({ ... });

的意思是：对于选择的元素，延迟 20 毫秒后执行动画效果。

- bdurao

Answer 6

如果使用jQuery，只需在重新启动动画之前完成当前动画：

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

- user5353588