我正在尝试创建一个页面加载的效果,并在5秒后,屏幕上的成功消息淡出或向上滑动。
我怎样才能做到这一点?
答案 0 :(得分:668)
内置javascript setTimeout。
setTimeout(
function()
{
//do something special
}, 5000);
UPDATE :您希望等待页面加载完成后,将该代码放入$(document).ready(...);
脚本中。
UPDATE 2 :jquery 1.4.0引入了.delay
方法。 Check it out。请注意,.delay仅适用于jQuery特效队列。
答案 1 :(得分:55)
使用普通的javascript计时器:
$(function(){
function show_popup(){
$("#message").slideUp();
};
window.setTimeout( show_popup, 5000 ); // 5 seconds
});
这将在DOM准备好后等待5秒。如果您想等到页面实际为loaded
,则需要使用此项:
$(window).load(function(){
function show_popup(){
$("#message").slideUp();
};
window.setTimeout( show_popup, 5000 ); // 5 seconds
})
编辑:在回答OP的评论时,询问是否有办法在jQuery中执行此操作而不使用setTimeout
,答案是否定的。但是如果你想让它更“jQueryish”你可以像这样包装它:
$.wait = function( callback, seconds){
return window.setTimeout( callback, seconds * 1000 );
}
然后您可以这样称呼它:
$.wait( function(){ $("#message").slideUp() }, 5);
答案 2 :(得分:38)
我遇到了这个问题,我想我会提供有关此主题的更新。 jQuery(v1.5 +)包含一个Deferred
模型,(尽管在jQuery 3之前不遵守Promises/A规范)通常被认为是一种更清晰的方法很多异步问题。我相信使用这种方法实现$.wait()
方法特别易读:
$.wait = function(ms) {
var defer = $.Deferred();
setTimeout(function() { defer.resolve(); }, ms);
return defer;
};
以下是您可以使用它的方法:
$.wait(5000).then(disco);
但是,如果在暂停之后,您只希望对单个jQuery选择执行操作,那么应该使用jQuery的本机.delay()
,我相信它也会使用Deferred's:
$(".my-element").delay(5000).fadeIn();
答案 3 :(得分:21)
setTimeout(function(){
},5000);
将代码放在{ }
300 = 0.3 seconds
700 = 0.7 seconds
1000 = 1 second
2000= 2 seconds
2200 = 2.2 seconds
3500 = 3.5 seconds
10000 = 10 seconds
<强>等强>
答案 4 :(得分:17)
一直使用这个消息覆盖,可以在点击时立即关闭,或者在10秒后自动关闭。
button = $('.status-button a', whatever);
if(button.hasClass('close')) {
button.delay(10000).queue(function() {
$(this).click().dequeue();
});
}
答案 5 :(得分:9)
Underscore library还提供“延迟”功能:
_.delay(function(msg) { console.log(msg); }, 5000, 'Hello');
答案 6 :(得分:4)
根据Joey的回答,我提出了一个预期的(通过jQuery,阅读&#39;队列&#39;)解决方案。
它有点遵循jQuery.animate()语法 - 允许与其他fx函数链接,支持&#39; slow&#39;和其他jQuery.fx.speeds以及完全jQuery。如果你停止那些动作,它将以与动画相同的方式处理。
jsFiddle测试场有更多用法(比如炫耀.stop()),可以找到here。
解决方案的核心是:
$('<queue/>')
.delay(100 /*ms*/)
.queue( (next) => { $('#result').text('done.'); next(); } );
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="result"></div>
&#13;
整个插件,支持使用$ .wait()和$(..)。wait():
// add wait as $.wait() standalone and $(elem).wait() for animation chaining
(function($) {
$.wait = function(duration, completeCallback, target) {
$target = $(target || '<queue />');
return $target.delay(duration).queue(function(next){completeCallback && completeCallback.call($target); next();});
}
$.fn.wait = function(duration, completeCallback) {
return $.wait.call(this, duration, completeCallback, this);
};
})(jQuery);
//TEST
$(function() {
// stand alone
$.wait(1000, function() {
$('#result')
.append('...done');
});
// chained
$('#result')
.append('go...')
.wait('slow', function() {
$(this).append('after slow');
})
.css({color: 'green'});
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="result"></div>
&#13;
注意:,因为等待添加到动画堆栈,$ .css()会立即执行 - 正如它所假设的:预期的jQuery行为。
答案 7 :(得分:3)
我意识到这是一个古老的问题,但这是一个插件,用于解决某些人可能会发现有用的问题。
https://github.com/madbook/jquery.wait
让您执行此操作:
$('#myElement').addClass('load').wait(5000).addClass('done');
之所以应使用.wait
而不是.delay
是因为.delay
不支持所有的jquery函数,并且.delay
仅适用于动画函数。例如,延迟不支持.addClass
和.removeClass
或者您可以改用此功能。
function sleep(milliseconds) {
var start = new Date().getTime();
for (var i = 0; i < 1e7; i++) {
if ((new Date().getTime() - start) > milliseconds){
break;
}
}
}
sleep(5000);
答案 8 :(得分:1)
$( "#foo" ).slideUp( 300 ).delay( 5000 ).fadeIn( 400 );