4

メッセージ ボックスのアニメーション キューに問題があります...

アプリケーションからのエラーや情報をユーザーに通知する機能を作成しました。メッセージは 5 秒間 (遅延) 表示されますが、ユーザーはメッセージボックスの十字ボタンをクリックしてメッセージを非表示にすることができます。

私が欲しかったもの： notify（）を呼び出すと、メッセージボックスがスライドダウンし、5秒後にフェードアウト（）が自動化されます。5 秒の遅延の前に notify() を呼び出すと、現在の msgbox が hide() され、新しい msgbox が下にスライドし、5 秒後に再び自動的に fadeOut() されます。

私のコードに実際に追加されるもの:遅延が終了する前に「notify()」関数を思い出すと、メッセージボックスは正しく非表示になりますが、表示されたばかりのメッセージボックスの遅延は5秒より短くなります...

jQuery 関数 ".stop(true,true)" を使用して遅延をリセットしようとしましたが、機能しません。私の問題を解決する方法を知っている人はいますか?

これが私のスニペットのフィドルです: http://jsfiddle.net/wvqkT/ 。問題を確認するには、ボタンをクリックし、2 秒待ってからもう一度ボタンをクリックします。5 回実行すると、msgbox がすぐに消えてしまうことがわかります...

これが私の関数のコードです

function notify(type, message) {
$('#notificationMessage').stop(true, true).hide();
var classes = 'info warning success error';
$('#notificationMessage').removeClass(classes);
var types = classes.split(' ');
var title = "";

if (type === types[0]) {
    title = "Information";
} else if (type === types[1]) {
    title = "Attention";
} else if (type === types[2]) {
    title = "Succès";
} else if (type === types[3]) {
    title = "Erreur";
} else {
    title = "Information";
    type = types[0];
}
$('#notificationMessage').addClass(type);
$('#notificationMessage h3').empty().append(title);
$('#notificationMessage p').empty().append(message);
$('#notificationMessage').slideDown({ queue: false }).delay(5000).fadeOut(3000); }

$('#btn').on('click',function(){
    notify($('#type').val(),"This is the message to show....");
});

ご協力いただきありがとうございます

4

2 に答える 2

2

Delay()問題は、代わりに setTimeout() を使用する必要があるキャンセルできないことです。

var timeout;
function notify(type, message) { 
    //..your old code here
    $('#notificationMessage').slideDown(function(){
        clearTimeout(timeout); 
        timeout = setTimeout(function() { $(this).fadeOut(3000) }, 5000);
    }) 
}

jsフィドル

jQueryページから：

.delay() メソッドは、キューに入れられた jQuery エフェクト間の遅延に最適です。制限があるため (たとえば、遅延をキャンセルする方法は提供されません)、.delay() は JavaScript のネイティブな setTimeout 関数に代わるものではなく、特定のユース ケースにより適している場合があります。

于 2013-09-12T13:41:28.727 に答える