我想创造一个效果,在这个效果中,页面加载后,5秒钟后,屏幕上的成功信息渐渐消失,或滑动起来。
我怎样才能做到这一点?
内置的JavaScript setTimeout。
setTimeout(
function()
{
//do something special
}, 5000);
更新:你想从页面加载完毕后开始等待,所以把这段代码放在你的$(document).ready(...);
脚本中。
更新2:jquery 1.4.0引入了.delay
方法。看看吧。请注意,.delay只适用于jQuery的效果队列。
使用一个正常的javascript计时器。
$(function(){
function show_popup(){
$("#message").slideUp();
};
window.setTimeout( show_popup, 5000 ); // 5 seconds
});
这将在DOM准备好后等待5秒。如果你想等到页面真正 "加载",你需要使用这个。
$(window).load(function(){
function show_popup(){
$("#message").slideUp();
};
window.setTimeout( show_popup, 5000 ); // 5 seconds
})
编辑:在回答OP'的评论时,询问是否有办法在jQuery中做到这一点而不使用setTimeout
,答案是没有。但如果你想让它变得更像jQuery,你可以这样包装它。
$.wait = function( callback, seconds){
return window.setTimeout( callback, seconds * 1000 );
}
然后你可以这样调用它。
$.wait( function(){ $("#message").slideUp() }, 5);
我遇到了这个问题,我想我''d提供一个更新的主题。
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();
根据Joey'的回答,我想出了一个打算(通过jQuery,阅读关于'queue')的解决方案。
它有点遵循jQuery.animate()的语法--允许与其他fx函数连锁,支持'slow'。 和其他jQuery.fx.speed,同时也是完全的jQuery。 并将以相同的方式处理动画,如果你停止这些。
jsFiddle测试场有更多的用法(比如展示.stop()),可以在[这里][1]找到。
解决方案的核心是:。 <!--开始片段。 js hide: false console: true babel.false --> -- begin snippet: js hide: false console: true false -->
$('
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="result"></div>
<!--结束片段-->
整体作为一个插件,支持使用$.wait()和$(.).wait() :。
<!--开始片段。 js hide: false console.true babel: true true babel.false --> -- begin snippet: js hide: false console: true false -->
// 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'});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="result"></div>
<!--结束片段-->
注:因为wait会添加到动画堆栈中,所以$.css()会立即执行--因为它是应该的。 预期的jQuery行为。
[1]: