锋利的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 相关文章推荐
关于viewport,Ext.panel和Ext.form.panel的关系
May 07 Javascript
JS获取select-option-text_value的方法
Dec 26 Javascript
使用正则表达式的格式化与高亮显示json字符串
Dec 03 Javascript
javascript实现checkbox复选框实例代码
Jan 10 Javascript
第一次接触JS require.js模块化工具
Apr 17 Javascript
jQuery替换节点用法示例(使用replaceWith方法)
Sep 08 Javascript
jQuery中each循环的跳出和结束实例
Aug 16 jQuery
jQuery Collapse1.1.0折叠插件简单使用
Aug 28 jQuery
详解Vue项目在其他电脑npm run dev运行报错的解决方法
Oct 29 Javascript
vue组件内部引入外部js文件的方法
Jan 18 Javascript
解决VUE mounted 钩子函数执行时 img 未加载导致页面布局的问题
Jul 27 Javascript
详细分析JavaScript中的深浅拷贝
Sep 17 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
新版PHP极大的增强功能和性能
2006/10/09 PHP
php 文章采集正则代码
2009/12/28 PHP
简单的php写入数据库类代码分享
2011/07/26 PHP
php下利用curl判断远程文件是否存在的实现代码
2011/10/08 PHP
深入分析php之面向对象
2013/05/15 PHP
PHP 生成N个不重复的随机数
2015/01/21 PHP
PHP中preg_match函数正则匹配的字符串长度问题
2015/05/27 PHP
javascript cookies操作集合
2010/04/12 Javascript
JQUERY1.6 使用方法四 检测浏览器
2011/11/23 Javascript
可简单避免的三个JS发布错误的详细介绍
2013/08/02 Javascript
原生js编写设为首页兼容ie、火狐和谷歌
2014/06/05 Javascript
jquery实现增加删除行的方法
2015/02/03 Javascript
省市区三级联动下拉框菜单javascript版
2015/08/11 Javascript
js表单登陆验证示例
2016/10/19 Javascript
AngularJS指令中的绑定策略实例分析
2016/12/14 Javascript
Javascript 对cookie操作详解及实例
2016/12/29 Javascript
基于vue实现swipe轮播组件实例代码
2017/05/24 Javascript
详解jQuery中的isPlainObject()使用方法
2018/02/27 jQuery
小程序云开发实现数据库异步操作同步化
2019/05/18 Javascript
vue实现鼠标经过动画
2019/10/16 Javascript
原生js实现瀑布流效果
2020/03/09 Javascript
vue登录页实现使用cookie记住7天密码功能的方法
2021/02/18 Vue.js
python之import机制详解
2014/07/03 Python
Python出现segfault错误解决方法
2016/04/16 Python
Python Django使用forms来实现评论功能
2016/08/17 Python
tensorflow 使用flags定义命令行参数的方法
2018/04/23 Python
对python多线程SSH登录并发脚本详解
2019/02/14 Python
pycharm不能运行.py文件的解决方法
2020/02/12 Python
用CSS3实现背景渐变的方法
2015/07/14 HTML / CSS
英国最大的老式糖果店:A Quarter Of
2017/04/08 全球购物
英语系本科生求职信范文
2013/12/18 职场文书
大学迎新晚会主持词
2014/03/24 职场文书
土地租赁意向书
2014/07/30 职场文书
单位婚育证明范本
2014/11/21 职场文书
初中语文教学反思范文
2016/03/03 职场文书
React Hook用法示例详解(6个常见hook)
2021/04/28 Javascript