锋利的jQuery 要点归纳(三) jQuery中的事件和动画(下:动画篇)


Posted in Javascript onMarch 24, 2010

二、动画
1 show()方法和hide()方法

$("selector").show() 
从display:none还原元素默认或已设置的display属性 
$("selector").hide() 
设置元素的display样式为none,等于$("selector").css("display","none")

(注:传入参数后,.show()和.hide()方法同时动画改变元素的width,height和透明属性;传入参数控制显隐速度,单位毫秒,如.show(600),也可传入fast,normal,slow,fast为200毫秒,normal为400毫秒,slow为600毫秒)
2 fadeIn()方法和fadeOut()方法
$("selector").fadeIn() 
控制透明度在指定时间内从display:none提高至完全显示 
$("selector").fadeOut() 
控制透明度在指定时间内降低至display:none;

3 slideUp()方法和slideDown()方法
$("selector").slideUp() 
控制元素高度在指定时间内从下到上缩短至display:none; 
$("selector").slideDown() 
控制元素高度在指定时间内从display:none延伸至完整高度

4 自定义动画方法animate()
$("selector").animate(params,speed,callback); 
params:一个包含样式属性及值的映射,比如{property1:"value1",property2:"value2",...} 
speed:速度参数,可选 
callback:在动画完成时执行的参数(即回调函数),可选

常见的动画例子
<script> 
//自定义动画的例子 
$(function(){ 
$("selector").click(function(){ 
$(this).animate({left:"500px"},3000); //selector在3秒内向右移动500px 
}); 
}) 
</script>

<script> 
//累加、累减动画的例子 
$(function(){ 
$("selector").click(function(){ 
$(this).animate({left:"+=500px"},3000); //连续触发click事件时,在当前位置累加500px 
}); 
}) 
</script> 
<script> 
//多重动画的例子 
$(function(){ 
$("selector").click(function(){ 
$(this).animate({left:"500px",top:"300px",height:"+=100px"},3000); //向右下30度方向运动,同时增加高度 
}); 
}) 
</script> 
<script> 
//按顺序执行多个动画的例子 
$(function(){ 
$("selector").click(function(){ 
$(this).animate({left:"500px"},3000).animate({top:"300px"},3000); //动画队列 
}); 
}) 
</script>

5 动画回调函数
因css()方法不会加入动画队列中,则会马上执行。如若要在动画最后改变selector的css,需要利用回调函数
例:
<script> 
$("selector").click(function(){ 
$(this).animate({property1:"value1"},time).animate({property2:"value2"},time,function(){ 
$(this).css("property3","value3"); //css()方法利用回调函数加入动画队列 
}); 
}) 
</script>

(注:动画回调函数适用于jQuery所有的动画效果方法)
6 停止动画和判断是否处于动画状态
$("selector").stop()
结束当前动画,如队列中存在下一个动画则立即执行下一个动画,格式$("selector").stop([clearQueue][,gotoEnd])
切换动画的例子:
<script> 
$("selector").hover(function(){ 
$(this).stop().animate(); 
},function(){ 
$(this).stop().animate(); 
}) 
</script>

clearQueue参数设置为true时,将清空当前元素接下来尚未执行完的动画队列
例:
<script> 
$("selector").hover(function(){ 
$(this).stop(true).animate().animate() //如此时触发光标移出事件,直接跳过后面的动画队列,避免执行本队列第二个动画 
},function(){ 
$(this).stop(true).animate().animate() 
}) 
</script>

gotoEnd参数设置为true时,可将正在执行的动画直接到达结束时刻的状态
is(":animated")
判断元素是否处于动画状态,可用于防止动画累积
例:
<script> 
if(!$("selector").is(":animated")){ //判断元素是否正处于动画状态 
//如果当前没有进行动画,则添加新动画 
} 
</script>

7 其他动画方法
3个专门用于交互的动画方法:toggle(speed,[callback]); slideToggle(speed,[callback]); fadeTo(speed,opacity,[callback])
$("selector").toggle() 
切换元素的可见状态,如元素隐藏则切换为可见,反之亦然 
$("selector").slideToggle() 
通过高度变化来切换元素的可见性 
$("selector").fadeTo() 
把元素的不透明度以渐进方式调整到指定的值,如$("selector").fadeTo(600,0.2);以600毫秒速度将内容调整到20%透明度

8 动画方法概括
toggle()用来代替hide()和show() 
slideToggle()用来代替slideUp()和slideDown() 
animate()可代替所有动画方法
Javascript 相关文章推荐
在IE上直接编辑网页内容的js代码(IE地址栏js)
Apr 27 Javascript
Javascript中的变量使用说明
May 18 Javascript
通过jQuery源码学习javascript(三)
Dec 27 Javascript
JS根据key值获取URL中的参数值及把URL的参数转换成json对象
Aug 26 Javascript
JavaScript类型系统之Object详解
Jan 07 Javascript
onclick和onblur冲突问题的快速解决方法
Apr 28 Javascript
深入浅析JS Function()构造函数
Aug 22 Javascript
vue+jquery+lodash实现滑动时顶部悬浮固定效果
Apr 28 jQuery
javascript中一些奇葩的日期换算方法总结
Nov 14 Javascript
vue使用@scroll监听滚动事件时,@scroll无效问题的解决方法详解
Oct 15 Javascript
推荐几个不错的console调试技巧实现
Dec 20 Javascript
javascript canvas实现雨滴效果
Jun 09 Javascript
锋利的jQuery 要点归纳(三) jQuery中的事件和动画(上:事件篇)
Mar 24 #Javascript
jQuery AJAX 调用WebService实现代码
Mar 24 #Javascript
jquery 仿QQ校友的DIV模拟窗口效果源码
Mar 24 #Javascript
Javascript中Eval函数的使用
Mar 23 #Javascript
JavaScript Eval 函数使用
Mar 23 #Javascript
js本身的局限性 别让javascript做太多事
Mar 23 #Javascript
js parentElement和offsetParent之间的区别
Mar 23 #Javascript
You might like
解析thinkphp的左右值无限分类
2013/06/20 PHP
PHP开发实现微信退款功能示例
2017/11/25 PHP
PHP+redis实现的悲观锁机制示例
2018/06/12 PHP
统计PHP目录中的文件数方法
2019/03/05 PHP
JavaScript创建命名空间(namespace)的最简实现
2007/12/11 Javascript
jquery中dom操作和事件的实例学习-表单验证
2011/11/30 Javascript
JavaScript打印iframe内容示例代码
2013/08/20 Javascript
document.forms[].submit()使用介绍
2014/02/19 Javascript
快速学习JavaScript的6个思维技巧
2015/10/13 Javascript
javascript中window.open在原来的窗口中打开新的窗口(不同名)
2015/11/15 Javascript
BootStrap点击下拉菜单项后显示一个新的输入框实现代码
2016/05/16 Javascript
关于JavaScript中事件绑定的方法总结
2016/10/26 Javascript
Bootstrap下拉菜单更改为悬停(hover)触发的方法
2017/05/24 Javascript
JS模拟超市简易收银台小程序代码解析
2017/08/18 Javascript
Vue弹出菜单功能的实现代码
2018/09/12 Javascript
详解vue beforeRouteEnter 异步获取数据给实例问题
2019/08/09 Javascript
[01:03:03]VP vs Mineski 2018国际邀请赛淘汰赛BO3 第一场 8.22
2018/08/23 DOTA
[02:03]完美世界DOTA2联赛10月30日赛事集锦
2020/10/31 DOTA
基于python实现微信模板消息
2015/12/21 Python
多个应用共存的Django配置方法
2018/05/30 Python
Python实现基于KNN算法的笔迹识别功能详解
2018/07/09 Python
详解PyCharm配置Anaconda的艰难心路历程
2018/08/13 Python
python实现自动登录
2018/09/17 Python
python实现数据清洗(缺失值与异常值处理)
2019/12/02 Python
pytorch模型预测结果与ndarray互转方式
2020/01/15 Python
Jupyter notebook如何实现指定浏览器打开
2020/05/13 Python
python datetime时间格式的相互转换问题
2020/06/11 Python
中专生自荐信
2013/10/12 职场文书
导游实习生自荐书
2014/01/28 职场文书
元旦晚会活动总结
2014/07/09 职场文书
关于晚自习早退的检讨书
2014/09/13 职场文书
入党介绍人意见范文
2015/06/01 职场文书
入党介绍人意见怎么写
2015/06/03 职场文书
医学会议开幕词
2016/03/03 职场文书
每日六道java新手入门面试题,通往自由的道路
2021/06/30 Java/Android
python如何将mat文件转为png
2022/07/15 Python