Question

我有一个msg警报显示在select change或ajax请求上。它工作部分正常，但问题是，如果你快速切换选项即使msg已经可见，你也会再次看到fadeout / fadein。

如果msg可见且新的msg进入，则需要的效果是，清除现有的超时，设置新的msg超时和淡出。的 http://jsfiddle.net/p2979/1/

function alerts(msg) {

    $('.msg-alert').fadeIn(500).html(msg);

    if ($('.msg-alert').is(':visible')) {
        $('.msg-alert').delay(2000).fadeOut(500);
    }
}


$('#option').on('change', function () {


    if ($(this).val() == 1) {
        var msg = 'Msg 1';
    } else {
        msg = 'Msg 2';
    }

    alerts(msg);
});

感谢任何帮助。谢谢！

Answer 1

你可以使用stop，并在fadeOut（）中添加函数来添加像这样的html msg

function alerts(msg) {
    $('.msg-alert').stop().fadeOut(500, function () {
        $('.msg-alert').html(msg)
    }).fadeIn(500)
}

DEMO

<强>更新

您可以像这样使用clearInterval（）和setTimeout

var tOut = null;

function alerts(msg) {
    clearTimeout(tOut);
    $this = $('.msg-alert');
    $this.html(msg).fadeIn(500);
    tOut = setTimeout(function () {
        $this.fadeOut(500);
    }, 2000);
}

DEMO

Answer 2

在.stop()之前添加.fadeIn()以清除上一个动画队列。

$('.msg-alert').stop().fadeIn(500).html(msg);

它通常会处理您在使用触发动画时发生的所有排队怪癖。

您可以将.fadeOut()添加到.fadeIn()的回调中。

<强> Demo

设置fadein / fadeut jQuery的超时

2 个答案: