动画创造了对 callback 函数的需求。
————————————————————
jQuery 动画的问题
许多 jQuery 函数涉及动画。这些函数也许会将 speed 或 duration 作为可选参数。
例子:$("p").hide("slow")
speed 或 duration 参数可以设置许多不同的值,比如 "slow", "fast", "normal" 或毫秒。
实例
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").hide(1000);
});
});
</script>
</head>
<body>
<button type="button">Hide</button>
<p>This is a paragraph with little content.</p>
<p>This is another small paragraph.</p>
</body>
</html>
由于 JavaScript 语句(指令)是逐一执行的 - 按照次序,动画之后的语句可能会产生错误或页面冲突,因为动画还没有完成。
为了避免这个情况,您可以以参数的形式添加 Callback 函数。
————————————————————
jQuery Callback 函数
当动画 100% 完成后,即调用 Callback 函数。
典型的语法:
$(selector).hide(speed,callback)
callback 参数是一个在 hide 操作完成后被执行的函数。
错误(没有 callback)
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").hide(2000);
alert("The paragraph is now hidden");
});
});
</script>
</head>
<body>
<button type="button">Hide</button>
<p>This is a paragraph with little content.</p>
</body>
</html>
正确(有 callback)
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").hide(1000,function(){
alert("The paragraph is now hidden");
});
});
});
</script>
</head>
<body>
<button type="button">Hide</button>
<p>This is a paragraph with little content.</p>
</body>
</html>
结论:如果您希望在一个涉及动画的函数之后来执行语句,请使用 callback 函数。
分享到:
相关推荐
学习资料包括: 1.JQuery简介 2.JQuery语法 3.JQuery选择器 4.JQuery事件 ...5.JQuery Callback函数 6.JQuery常用函数 另外还有jquery中文参考文档,希望能对想要学习jquery的朋友有所帮助!
2.1 jQuery 核心函数 17 2.1.1 jQuery(expression, [context]) 17 2.1.2 jQuery(html, [ownerDocument]) 18 2.1.3 jQuery(html, props) 19 2.1.4 jQuery(elements) 20 2.1.5 jQuery() 20 2.1.6 jQuery(callback) 21 ...
jQuery.each(function),遍历jQuery对象集合,在每个对象上执行function函数,function callback(index, domElement){this}; jQuery.size(),返回jQuery对象集合的大小 jQuery.length,相当于size()方法 jQuery....
通过jquery,通过ajax技术访问 server.asp,然后在用回调函数实现本地javascript的调用。这样可以实现通过服务器端控制客户端的html元素。 <!--html客户端代码,演示如何调用jquery的回调函数-->
jQuery特效、jQuery语法、jQuery切换、jQuery滑动函数、jQuery自定义动画、jQuery Callback函数 等等
jQuery 核心函数 jQuery([sel,[context]]) jQuery(html,[ownerDoc])1.8* jQuery(callback) jQuery.holdReady(hold) jQuery 对象访问 each(callback) size() length selector context get([index]) index...
主要介绍了jQuery 回调函数(callback)的使用和基础,需要的朋友可以参考下
jquery中文文档api, jQuery 核心函数 jQuery([sel,[context]]) jQuery(html,[ownerDoc]) jQuery(callback) jQuery.holdReady(hold)1.6+ jQuery 对象访问 each(callback) size() length selector context get([index]...
详细讲解JQuery语法,JQuery选择器,JQuery事件,JQuery效果,JQuery Callback函数,JQuery HTML操作,JQuery CSS函数,JQuery Ajax函数的使用。
在Jquery中,所有的DOM对象都将封装成Jquery对象,而且只有Jquery对象才能使用Jquery方法或者属性来执行相应的操作。 所以Jquery提供了一个可以将...jquery(callback) 该函数是jquery(document).ready(callback)的简
本次在线培训任务 JQuery简介 JQuery语法 JQuery选择器 JQuery事件 JQuery Callback函数 JQuery常用函数 JQuery实现图片预览效果
jQuery Callback 方法 Callback 函数在当前动画 100% 完成之后执行。 jQuery 动画的问题 许多 jQuery 函数涉及动画。这些函数也许会将 speed 或 duration 作为可选参数。 例子:$(“p”).hide(“slow”) speed 或 ...
jQuery 核心函数 jQuery([sel,[context]]) jQuery(html,[ownerDoc])1.8* jQuery(callback) jQuery.holdReady(hold)1.6+ jQuery 对象访问 each(callback) size() length selector context get([index]) ...
jquery对于一个程序员来说,或多或少都听过。相信很多人在项目中也都用过。现在也有很多开源的库都是依赖于jQuery,因此熟悉jQuery还是很有必要的。使用熟练的大神可以简单看看,...jQuery(callback) 测试用例 以下
callback函数在当前动画100%完成之后执行 代码如下: $(“p”).hide(1000); alert(“the paragraph is now hidden”); <!–未使用回调函数,段落未完全隐藏时就弹出信息–> $(“p”).hide(1000,function()...
jquery提供了很多便利的函数,如each(fn),但是使用这些函数的前提是:你使用的对象是Jquery对象。使一个Dom对象成为一个Jquery对象很简单,通过下面一些方式(只是一部分): 代码 var a = $("#cid"); var b = $...
jQuery 核心函数 jQuery(expr, [context]) jQuery(html, [ownerDoc]) jQuery(elements) jQuery(callback) jQuery 对象访问 each(callback) size() length selector context get() get(index) index...
演示简单的 jQuery animate() 函数。 <script type="text/javascript" src="/jquery/jquery.js"> <script type="text/javascript"> $(document).ready(function(){ $("#start").click(function(){ $("#box")....