008_效果和动画的Callback函数

1. Callback函数在当前效果或动画100%完成之后执行。

2. jQuery动画的问题

2.1. 许多jQuery函数涉及动画。这些函数也许会将speed或duration作为可选参数。

2.2. speed或duration参数可以设置许多不同的值, 比如: "slow", "fast", "normal"或毫秒。

2.3. 由于JavaScript语句(指令)是按照次序逐一执行的, 动画之后的语句可能会产生错误或页面冲突, 因为动画还没有完成。

2.4. 为了避免这个情况, 您可以以参数的形式添加Callback函数。

3. jQuery Callback函数

3.1. 当动画100%完成后, 即调用Callback函数。

3.2. 典型的语法:

$(selector).hide(speed,callback)

3.3. callback参数是一个在hide操作完成后被执行的函数。

3.4. 错误(没有callback)

$("p").hide(1000);
alert("The paragraph is now hidden");

3.5. 正确(有callback)

$("p").hide(1000,function(){alert("The paragraph is now hidden");
});

3.6. 结论: 如果您希望在一个涉及动画的函数之后来执行语句, 请使用callback函数。

4. 例子

4.1. 代码

<!DOCTYPE html>
<html><head><title>jQuery效果和动画的Callback函数</title><meta charset="utf-8" /><script type="text/javascript" src="jquery.js"></script><script type="text/javascript">$(document).ready(function(){$('#btn1').click(function(){$("div").hide('normal', function(){alert('隐藏效果执行完毕。')});});$('#btn2').click(function(){$("div").show('normal', function(){alert('显示效果执行完毕。')});});$('#btn3').click(function(){$("div").fadeOut('normal', function(){alert('淡出效果执行完毕。')});});$('#btn4').click(function(){$("div").fadeIn('normal', function(){alert('淡入效果执行完毕。')});});$('#btn5').click(function(){$("div").slideUp('normal', function(){alert('向上滑动效果执行完毕。')});});$('#btn6').click(function(){$("div").slideDown('normal', function(){alert('向下滑动效果执行完毕。')});});$('#btn7').click(function(){var div = $("div");div.animate({height:'+=100px', opacity: '0.5', fontSize: '2em'}, "slow");div.animate({width:'+=50px', opacity: '0.1', fontSize: '3em'}, "1000");div.animate({height:'+=100px', opacity: '0.5', fontSize: '2em'}, "2000");div.animate({width:'+=50px', opacity: '1', fontSize: '1em'}, "slow", function(){alert('动画序列执行完毕。')});});});</script></head><body><button id="btn1">3s隐藏效果</button> <button id="btn2">3s显示效果</button><button id="btn3">3s淡出效果</button> <button id="btn4">3s淡入效果</button><button id="btn5">3s向上滑动效果</button> <button id="btn6">3s向下滑动效果</button><button id="btn7">动画</button><br /><br /><div style="background-color: red; width:300px; height: 150px; position: relative;">jQuery效果和动画的Callback函数</div></body>
</html>

4.2. 效果图

008_效果和动画的Callback函数相关推荐

从零开始学_JavaScript_系列（四）——jquery（基础，选择器，触发条件，动画，回调函数）...
jQuery语法 (1)引用jquery文件及下载库: http://jquery.com/download/ 下载 Download the compressed, production jQuer ...
Callback 函数
说明:此文章出自<深入浅出mfc>第6章的"Callback 函数" Callback 函数 Hello的OnPaint在程序收到 WM_PAINT之后开始运作.为了 ...
keras中的fit函数参数_keras的fit_generator与callback函数
fit_generator函数 fit_generator函数 callback类每一个epoch结束(on_epoch_end)时,都要调用callback函数,callback函数(类)都要集成 ...
融入动画技术的粒子效果文字动画交互应用
写在前面本次实现的交互系统是基于粒子系统的粒子文本效果.本次课程设计主要参考代码本色一书中的内容,系统应用中运用了 <代码本色> 第一章向量.第二章力.第四章粒子系统等章节的动画技 ...
jQuery(动画，核心函数)
基本的HTML布局 <div id="box"><img src="1.jpg" alt=""><img sr ...
如何制作具有声音效果的动画桌面精灵
如何制作具有声音效果的动画桌面精灵作者:徐景周下载实例代码:http://www.csdn.net/cnshare/soft/7/7085.shtm http://www.csdn.net/cns ...
jQuery Callback 函数
Query Callback 函数当动画 100% 完成后,即调用 Callback 函数. 典型的语法: $(selector).hide(speed,callback) callback 参数是 ...
callback 函数的用法
callback函数会在当前动画100%完成之后才会执行 jQuery Callback函数的用法: $(selector).hide(speed,callback); speed 或 duratio ...
jQuery效果-自定义动画效果animate /王者荣耀手风琴效果案例
jQuery效果自定义动画效果animate animate([params,[speed],[easing],[fn]) (1)params:想要更改的样式属性,以对象形式传递,必须写,属性名可以 ...

008_效果和动画的Callback函数

008_效果和动画的Callback函数相关推荐

最新文章

热门文章