我可能有一个简单的问题要解决,但我不知道这是什么方法。
我的网站顶部有一个div.notification
栏,默认情况下是隐藏的。如果需要,该栏会获得额外的success
或warning
课程,并将其设置为display:block;
。
所以,有两种情况。输出消息在页面加载时直接呈现给.notification
栏(并且它与success
或warning
一起使用)或者.notifcation
栏是从顶部向下滑动并用json数据提供。
任何方式,通知栏应始终显示10秒钟,然后再向上滑动。
因此我编写了两个处理此栏的函数。
var timing = 10000;
function notificationOutput(type, message) {
var note = $('.notification');
note.hide();
note.find('.message').html(message);
note.stop(true,true).slideDown().delay(timing).slideUp();
}
function notificationSlideUp(slideUp) {
var note = $('.notification');
if ( slideUp ) note.delay(timing).slideUp();
else note.stop(true,true).slideUp();
}
因此notificationOutput()
函数是从各种其他函数触发的,这些函数返回json数据并将其呈现到框中。
现在,每个页面加载都会调用notificationSlideUp()
函数,因为在我的标题中我有这个...
<script type="text/javascript">
$(document).ready(function(){
notificationSlideUp(true);
});
</script>
这是有原因的!请记住.notification
在页面加载时直接设置为可见的情况...例如当用户登录我的平台时,.notification
栏立即可见,并显示“欢迎用户名,您已成功登录”。
我在标题中调用notifictaionSlideUp()
函数,以确保当前可见的.notification
栏会在10秒后再次滑动()。
这里出现问题......
不知何故,这导致整个通知时间和上下滑动被“混淆”。因此,必须对slide-functions和/或delay()函数进行一些排队,因为如果note.stop(true,true)
函数中没有notificationOutput()
,则通知不会立即slideDown(),如果它在页面加载后的前10秒。那是因为notificationSlideUp()
函数已经触发了对象的slideUp()和delay()。
延迟也是如此。如果在前10秒内放出.notification
,则延迟时间不正确,因为延迟计数器已在页面加载时启动。
知道如何解决这个问题以便它始终有效吗?
更新
var notificationTimer;
function notificationOutput(type, message) {
var note = $('.notification');
note.hide();
note.find('.message').html(message);
note.stop(true,true).slideDown();
clearTimeout(notificationTimer);
notificationTimer = setTimeout(function() {
note.stop(true,true).slideUp();
}, 10000);
}
function notificationSlideUp(slideUp) {
var note = $('.notification');
if ( slideUp ) {
clearTimeout(notificationTimer);
notificationTimer = setTimeout(function() {
note.stop(true,true).slideUp();
}, 10000);
} else {
note.stop(true,true).slideUp();
}
}
答案 0 :(得分:1)
不幸的是,jQuery的delay()
函数没有像setTimeout()
clearTimeout()
那样提供任何消除延迟的方法。我建议您使用已命名的delay()
替换setTimeout()
s,并为需要立即取消/触发排队动画的情况将条件写入clearTimeout()
。
答案 1 :(得分:1)
.delay()方法最适合在排队的jQuery之间延迟 效果。 因为它是有限的 - 例如,它没有提供一种方法 取消延迟-.delay()不能替代JavaScript的原生代码 setTimeout函数,可能更适合某些用途 例。
但你可以使用以下'提示' - 用一些不会改变任何东西的动画替换延迟。例如.animate({opacity:1},timing)