锋利的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 相关文章推荐
使用Jquery打造最佳用户体验的登录页面的实现代码
Jul 08 Javascript
用显卡加速,轻松把笔记本打造成取暖器的办法!
Apr 17 Javascript
浅析JSONP技术原理及实现
Jun 08 Javascript
关于Iframe父页面与子页面之间的相互调用
Nov 22 Javascript
设置cookie指定时间失效(实例代码)
May 28 Javascript
关于laydate.js加载laydate.css路径错误问题解决
Dec 27 Javascript
浅谈Vue网络请求之interceptors实际应用
Feb 28 Javascript
js取小数点后两位四种方法
Jan 18 Javascript
浅谈Express.js解析Post数据类型的正确姿势
May 30 Javascript
微信小程序中如何计算距离某个节日还有多少天
Jul 15 Javascript
js实现上传图片并显示图片名称
Dec 18 Javascript
js 计数排序的实现示例(升级版)
Jan 12 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二分法查找数组是否包含某一元素
2013/05/23 PHP
php利用ffmpeg提取视频中音频与视频画面的方法详解
2017/06/07 PHP
PHP实现双链表删除与插入节点的方法示例
2017/11/11 PHP
详细对比php中类继承和接口继承
2018/10/11 PHP
Swoole实现异步投递task任务案例详解
2019/04/02 PHP
php session_decode函数用法讲解
2019/05/26 PHP
javascript中的几个运算符
2007/06/29 Javascript
介绍JavaScript中Math.abs()方法的使用
2015/06/14 Javascript
HTML5之WebSocket入门3 -通信模型socket.io
2015/08/21 Javascript
js确认框confirm()用法实例详解
2016/01/07 Javascript
JS产生随机数的几个用法详解
2016/06/22 Javascript
javascript动画之模拟拖拽效果篇
2016/09/26 Javascript
javascript 动态生成css代码的两种方法
2017/03/17 Javascript
jQuery实现广告条滚动效果
2017/08/22 jQuery
浅谈JS中this在各个场景下的指向
2019/08/14 Javascript
微信小程序仿今日头条导航栏滚动解析
2019/08/20 Javascript
JS实现滑动导航效果
2020/01/14 Javascript
Vue获取页面元素的相对位置的方法示例
2020/02/05 Javascript
CentOS 8.2服务器上安装最新版Node.js的方法
2020/12/16 Javascript
[54:54]Newbee vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
python中使用urllib2获取http请求状态码的代码例子
2014/07/07 Python
讲解Python中的递归函数
2015/04/27 Python
python中查看变量内存地址的方法
2015/05/05 Python
Python使用redis pool的一种单例实现方式
2016/04/16 Python
python psutil库安装教程
2018/03/19 Python
Go/Python/Erlang编程语言对比分析及示例代码
2018/04/23 Python
kafka-python批量发送数据的实例
2018/12/27 Python
从0开始的Python学习014面向对象编程(推荐)
2019/04/02 Python
详解10个可以快速用Python进行数据分析的小技巧
2019/06/24 Python
基于Python安装pyecharts所遇的问题及解决方法
2019/08/12 Python
一个非常简单好用的Python图形界面库(PysimpleGUI)
2020/12/28 Python
Mountain Warehouse澳大利亚官网:欧洲家庭户外品牌倡导者
2016/11/20 全球购物
零件设计自荐信范文
2013/11/27 职场文书
说明书格式及范文
2014/05/07 职场文书
酒店圣诞节活动总结
2015/05/06 职场文书
OpenCV-Python模板匹配人眼的实例
2021/06/08 Python