jQuery学习笔记(二)- 效果和Callback函数
2012-11-18 21:44
429 查看
jQuery 效果 - 来自本页
函数 | 描述 |
---|---|
$(selector).hide() | 隐藏被选元素 |
$(selector).show() | 显示被选元素 |
$(selector).toggle() | 切换(在隐藏与显示之间)被选元素 |
$(selector).slideDown() | 向下滑动(显示)被选元素 |
$(selector).slideUp() | 向上滑动(隐藏)被选元素 |
$(selector).slideToggle() | 对被选元素切换向上滑动和向下滑动 |
$(selector).fadeIn() | 淡入被选元素 |
$(selector).fadeOut() | 淡出被选元素 |
$(selector).fadeTo() | 把被选元素淡出为给定的不透明度 |
$(selector).animate() | 对被选元素执行自定义动画 |
问题的引出:jQuery 动画的问题
许多 jQuery 函数涉及动画。这些函数也许会将 speed 或 duration 作为可选参数。例子:$("p").hide("slow")
speed 或 duration 参数可以设置许多不同的值,比如 "slow", "fast", "normal" 或毫秒。
由于 JavaScript 语句(指令)是逐一执行的 - 按照次序,动画之后的语句可能会产生错误或页面冲突,因为动画还没有完成。
为了避免这个情况,这个时候就需要Callback函数出马了,您可以以参数的形式添加 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(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>
错误:
$("p").hide(1000); alert("The paragraph is now hidden");
结论:
如果您希望在一个涉及动画的函数之后来执行语句,请使用 callback 函数。转自W3School:http://www.w3school.com.cn/jquery/index.asp
相关文章推荐
- jquery学习笔记-效果代码
- 【jQuery】jQuery官方基本教程的学习笔记3-动画效果Effects
- JQuery学习笔记之JQuery效果hide、show以及toggle方法的callback参数
- JQuery笔记-学习绚丽效果教你做之JQuery实战
- 学习笔记——jQuery实现复选框效果
- JQuery学习笔记 实现图片翻转效果和TAB标签切换效果第1/2页
- jQuery 学习笔记之十五 图片切换效果
- jquery学习笔记 之二 事件与效果
- jquery动画效果学习笔记(8种效果)
- jQuery 学习笔记之十四 横向滚动效果
- JQuery 学习笔记(一)超链接和图片提示效果
- jQuery 学习笔记之十五 图片切换效果
- jQuery学习笔记之jQuery动画效果
- jQuery 学习笔记(三)——jQuery效果
- 用jQuery实现瀑布流效果学习笔记
- 【学习笔记】jQuery中的动画与效果
- jQuery动态效果学习笔记
- jQuery学习笔记之jQuery动画效果
- learning jQuery 学习笔记七(+jQuery 1.4.1 API)-- 效果-修改内联CSS
- React学习笔记:使用jquery实现动画效果淡入淡出