4

我的消息框的动画队列有问题...

我制作了一个功能来通知用户有关应用程序的错误或信息。消息在 5 秒内显示（延迟），但用户可以通过单击 msgbox 中的十字按钮来隐藏它。

我想要的是：调用 notify() 将在 5 秒后滑下我的 msgbox 并自动淡出() 它。在 5 秒延迟之前调用 notify() 将 hide() 当前的 msgbox 并向下滑动一个新的 msgbox，该 msgbox 将在 5 秒后再次自动淡出()。

我的代码真正附加的是什么：如果我在延迟结束之前回忆起我的“notify()”函数，msgbox 将被正确隐藏，但新显示的 msgbox 的延迟将比我的 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);
    }) 
}

jsFiddle

从 jQuery 页面：

.delay() 方法最适合在排队的 jQuery 效果之间进行延迟。因为它是有限的——例如，它不提供取消延迟的方法——.delay() 不能替代 JavaScript 的原生 setTimeout 函数，这可能更适合某些用例。

于 2013-09-12T13:41:28.727 回答
1

至于 jquery 1.9，您现在可以使用finish()将清除延迟方法使用的超时的方法 { hooks.stop.call( this, true ); }

注意：在您的示例代码中，您需要在队列中推送 slideDown() 方法，而不是显式使用queue: false

$('#notificationMessage').finish().hide();

见演示

于 2013-09-12T16:08:20.430 回答