JQuery学习系列(六)效果
2012-06-19 15:10
211 查看
jQuery 可以创建隐藏、显示、切换、滑动以及自定义动画等效果。
(一)隐藏和显示
通过 hide() 和 show() 两个函数,jQuery 支持对 HTML 元素的隐藏和显示:
hide() 和 show() 都可以设置两个可选参数:speed 和 callback。
speed 参数规定显示或隐藏的速度。可以设置这些值:"slow", "fast", "normal" 或毫秒。
callback 参数是在 hide 或 show 函数完成之后被执行的函数名称。您将在本教程下面的章节学习更多有关 callback 参数的知识。
(二)切换
jQuery toggle() 函数使用 show() 或 hide() 函数来切换 HTML 元素的可见状态。
隐藏显示的元素,显示隐藏的元素。
speed 参数可以设置这些值:"slow", "fast", "normal" 或 毫秒。
(三)滑动
jQuery 拥有以下滑动函数:
speed 参数可以设置这些值:"slow", "fast", "normal" 或毫秒。
callback 参数是在该函数完成之后被执行的函数名称。您将在本教程下面的章节学习更多有关 callback 参数的知识。
(四)自定义动画
jQuery 函数创建自定义动画的语法:
关键的参数是 params。它定义产生动画的 CSS 属性。可以同时设置多个此类属性:
第二个参数是 duration。它定义用来应用到动画的时间。它设置的值是:"slow", "fast", "normal" 或毫秒。
常见JQuery效果函数:
(一)隐藏和显示
通过 hide() 和 show() 两个函数,jQuery 支持对 HTML 元素的隐藏和显示:
实例
$("#hide").click(function(){ $("p").hide(); }); $("#show").click(function(){ $("p").show(); });
hide() 和 show() 都可以设置两个可选参数:speed 和 callback。
语法:
$(selector).hide(speed,callback) $(selector).show(speed,callback)
speed 参数规定显示或隐藏的速度。可以设置这些值:"slow", "fast", "normal" 或毫秒。
callback 参数是在 hide 或 show 函数完成之后被执行的函数名称。您将在本教程下面的章节学习更多有关 callback 参数的知识。
实例
$("button").click(function(){ $("p").hide(1000); });
(二)切换
jQuery toggle() 函数使用 show() 或 hide() 函数来切换 HTML 元素的可见状态。
隐藏显示的元素,显示隐藏的元素。
语法:
$(selector).toggle(speed,callback)
speed 参数可以设置这些值:"slow", "fast", "normal" 或 毫秒。
实例
$("button").click(function(){ $("p").toggle(); });
(三)滑动
jQuery 拥有以下滑动函数:
$(selector).slideDown(speed,callback) $(selector).slideUp(speed,callback) $(selector).slideToggle(speed,callback)
speed 参数可以设置这些值:"slow", "fast", "normal" 或毫秒。
callback 参数是在该函数完成之后被执行的函数名称。您将在本教程下面的章节学习更多有关 callback 参数的知识。
slideDown() 实例
$(".flip").click(function(){ $(".panel").slideDown(); });
slideUp() 实例
$(".flip").click(function(){ $(".panel").slideUp() })
slideToggle() 实例
$(".flip").click(function(){ $(".panel").slideToggle(); });
(四)自定义动画
jQuery 函数创建自定义动画的语法:
$(selector).animate({params},[duration],[easing],[callback])
关键的参数是 params。它定义产生动画的 CSS 属性。可以同时设置多个此类属性:
animate({width:"70%",opacity:0.4,marginLeft:"0.6in",fontSize:"3em"});
第二个参数是 duration。它定义用来应用到动画的时间。它设置的值是:"slow", "fast", "normal" 或毫秒。
实例
<script type="text/javascript"> $(document).ready(function(){ $("#start").click(function(){ $("#box").animate({height:300},"slow"); $("#box").animate({width:300},"slow"); $("#box").animate({height:100},"slow"); $("#box").animate({width:100},"slow"); }); }); </script>
常见JQuery效果函数:
方法 | 描述 |
---|---|
animate() | 对被选元素应用“自定义”的动画 |
clearQueue() | 对被选元素移除所有排队的函数(仍未运行的) |
delay() | 对被选元素的所有排队函数(仍未运行)设置延迟 |
dequeue() | 运行被选元素的下一个排队函数 |
fadeIn() | 淡入被选元素至完全不透明 |
fadeOut() | 淡出被选元素至完全不透明 |
fadeTo() | 把被选元素减弱至给定的不透明度 |
hide() | 隐藏被选的元素 |
queue() | 显示被选元素的排队函数 |
show() | 显示被选的元素 |
slideDown() | 通过调整高度来滑动显示被选元素 |
slideToggle() | 对被选元素进行滑动隐藏和滑动显示的切换 |
slideUp() | 通过调整高度来滑动隐藏被选元素 |
stop() | 停止在被选元素上运行动画 |
toggle() | 对被选元素进行隐藏和显示的切换 |
相关文章推荐
- C# 模仿QQ、MSN消息提示系列 四、bug修改 效果优化
- Azure实践系列 5:MFA用户配置及效果展示
- ios开发学习--按钮(Button)效果源码分享--系列教程1
- Android从零开搞系列:自定义View(15)仿天天美剧拖动卡片的效果(下)
- ajax系列教程,从读取,修改,添加,到酷酷的删除效果!
- 系列教程,从读取,修改,添加,到酷酷的删除效果!
- ajax系列教程,从读取,修改,添加,删除效果
- ios开发学习-弹出视图(Popup View) 效果源码分享--系列教程2
- ios开发学习--cocos2d(cocos2d)效果源码分享--系列教程
- ios开发学习--视图切换(View Transition)效果源码分享--系列教程
- 类似msn的提示效果代码系列四:利用反射和嵌入JavaScript资源封装消息提示的C#类
- 【Android 进阶】Android自定义系列:边缘凹凸的卡劵效果
- Android模块功能系列(1)一底部Tab标签以及照相、相册弹窗效果
- 前端框架vue.js系列(11):元素动画过渡效果
- C# 模仿QQ、MSN消息提示系列 二、基本效果模仿包含代码
- android游戏引擎andengine学习系列六:Physics物理碰撞效果理解
- css3开发系列----画控件凸起效果
- NGUI系列教程六(技能冷却的CD效果)
- [置顶] 小程序自学系列(零基础学小程序)---小程序实现简单的倒计时效果
- 2014年系列技术讲座之项目群管理模式改进及效果