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()在下一个队列项you can see the source here上的包装器，重要部分：

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

所以这只是排队setTimeout()，在执行时，将队列中的下一个项目出列并执行它。所以发生的事情是你添加了一个延迟，即使是.stop(true)或.clearQueue()，当你排队.fadeOut()后，你又将它添加回相同的< / strong> 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

Answer 2

正如Nick所指出的那样：

简而言之，你不能将.delay（）用于你想要的东西。

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

基本上，这会淡化为完全不透明，但由于消息框已经处于完全不透明状态，除了延迟x毫秒的以下动画外，这不会做任何事情。优点是可以使用.fadeTo()停止/中止.stop(true)。

Answer 3

试试这个。

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

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();我停止动画，重置不透明度，以防它在淡出中间并在添加消息并重新启动队列之前清除队列。我测试了它，它应该适合你。

Answer 5

我以这种方式重新启动动画:(不确定它是否完全正确）

$（元素）.stop（）clearQueue（）;

$（element）.delay（20）.animate（{...}）;

Answer 6

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

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

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

6 个答案: