在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

回答

相關問題