在fadein/fadeut上设置超时jQuery

我有一个msg提醒，显示在选择更改或ajax请求上。它的工作部分确定，但问题是，如果你快速切换选项即使消息已经可见，你会看到淡出/淡入淡出。在fadein/fadeut上设置超时jQuery

预期的效果是，如果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); 
});

任何帮助表示赞赏。谢谢！

来源

2014-01-24 Benn

您可以使用站，里面添加淡出（）函数中添加HTML味精这样

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

DEMO

更新

你可以使用clearInterval（）和se TTIMEOUT这样

var tOut = null; 

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

DEMO

来源

2014-01-24 12:34:15 Anton

这一个不淡出 – Benn

@Benn不淡出？为我淡出 – Anton

啊现在我看到你想让它在2秒后消失 – Anton

在你的.fadeIn()之前加上.stop()清除之前的动画队列。

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

它通常负责处理触发动画时发生的所有排队怪癖。

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

Demo

来源

2014-01-24 12:31:42

完全停止播放效果，我以前 – Benn

增加了一个演示，我的答案在我也把'.fadeOut（）'在.fadeIn的'回调（试了一下）'。 –

这几乎就是这样，我错误的是每个开关都有淡出/淡入淡出，如果msg div可见，味精应该只会改变，新的超时应该开始 – Benn

在fadein/fadeut上设置超时jQuery

回答

相关问题