锋利的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 相关文章推荐
javascript 可以拖动的DIV(二)
Jun 26 Javascript
JavaScript 空位补零实现代码
Feb 26 Javascript
Js获取事件对象代码
Aug 05 Javascript
JS的Document属性和方法小结
Sep 17 Javascript
JS实现控制表格内指定单元格内容对齐的方法
Mar 30 Javascript
JavaScript获取表单内所有元素值的方法
Apr 02 Javascript
webuploader模态框ueditor显示问题解决方法
Dec 27 Javascript
基于Vue2.0的分页组件
Mar 16 Javascript
JS实现获取毫秒值及转换成年月日时分秒的方法
Aug 15 Javascript
解决vue-router在同一个路由下切换,取不到变化的路由参数问题
Sep 01 Javascript
jQuery 点击获取验证码按钮及倒计时功能
Sep 20 jQuery
js与jquery获取input输入框中的值实例讲解
Feb 27 jQuery
锋利的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
php 图片上传类代码
2009/07/17 PHP
php统计文件大小,以GB、MB、KB、B输出
2011/05/29 PHP
PHP远程采集图片详细教程
2014/07/01 PHP
PHP编译安装中遇到的两个错误和解决方法
2014/08/20 PHP
详解PHP编码转换函数应用技巧
2016/10/22 PHP
jQuery 翻牌或百叶窗效果(内容三秒自动切换)
2012/06/14 Javascript
JavaScript实现从数组中选出和等于固定值的n个数
2014/09/03 Javascript
JS实现的4种数字千位符格式化方法分享
2015/03/02 Javascript
全面解析Bootstrap表单使用方法(表单控件)
2015/11/24 Javascript
JS实现DIV容器赋值的方法
2015/12/14 Javascript
微信小程序 数据绑定详解及实例
2016/10/25 Javascript
利用浮层使select不可选的实现方法
2016/12/03 Javascript
vue3.0 搭建项目总结(详细步骤)
2019/05/20 Javascript
js判断复选框是否选中的方法示例【基于jQuery】
2019/10/10 jQuery
微信小程序如何实现五星评价功能
2019/10/15 Javascript
Python的词法分析与语法分析
2013/05/18 Python
Python中模拟enum枚举类型的5种方法分享
2014/11/22 Python
用Python进行TCP网络编程的教程
2015/04/29 Python
Python中shutil模块的学习笔记教程
2017/04/04 Python
Python中xrange与yield的用法实例分析
2017/12/26 Python
Python中将变量按行写入txt文本中的方法
2018/04/03 Python
python读取txt文件并取其某一列数据的示例
2019/02/19 Python
Python hashlib加密模块常用方法解析
2019/12/18 Python
tensorflow使用range_input_producer多线程读取数据实例
2020/01/20 Python
python Matplotlib模块的使用
2020/09/16 Python
安装不同版本的tensorflow与models方法实现
2021/02/20 Python
应届生服装设计自我评价
2013/09/20 职场文书
安全生产检讨书
2014/01/21 职场文书
大学军训感言600字
2014/02/25 职场文书
房地产推广策划方案
2014/05/19 职场文书
俄语专业毕业生求职信
2014/07/12 职场文书
民主生活会对照检查材料思想汇报
2014/09/27 职场文书
初中生物教学反思
2016/02/20 职场文书
教师实习自我鉴定总结
2019/08/20 职场文书
关于python中readlines函数的参数hint的相关知识总结
2021/06/24 Python
Mysql中常用的join连接方式
2022/05/11 MySQL