如何启动/停止/重启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);
}

提前致谢...

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));
}

你可以在这里看到一个有效的演示