锋利的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 相关文章推荐
Tinymce+jQuery.Validation使用产生的BUG
Mar 29 Javascript
不用锚点也可以平滑滚动到页面的指定位置实现代码
May 08 Javascript
jquery 缓存问题的几个解决方法
Nov 11 Javascript
js 判断文件类型并控制表单提交示例代码
Nov 14 Javascript
JavaScript自定义日期格式化函数详细解析
Jan 14 Javascript
Jquery中扩展方法extend使用技巧
Aug 24 Javascript
原生JS实现跑马灯效果
Feb 20 Javascript
手机注册发送验证码倒计时的简单实例
Nov 15 Javascript
JavaScript实现点击出现图片并统计点击次数功能示例
Jul 23 Javascript
对vue下点击事件传参和不传参的区别详解
Sep 15 Javascript
Vue ElementUI实现:限制输入框只能输入正整数的问题
Jul 31 Javascript
JS setTimeout与setInterval的区别
Apr 20 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 explode()函数用法、切分字符串
2012/10/03 PHP
php面向对象值单例模式
2016/05/03 PHP
javascript 页面划词搜索JS
2009/09/28 Javascript
ExtJS Window 最小化的一种方法
2009/11/18 Javascript
基于jquery的一个简单的脚本验证插件
2010/04/05 Javascript
javascript实例--教你实现扑克牌洗牌功能
2014/05/15 Javascript
使用js实现数据格式化
2014/12/03 Javascript
JavaScript中的Math.LN2属性用法详解
2015/06/12 Javascript
js实现微信分享代码
2020/10/11 Javascript
ES6学习教程之对象的扩展详解
2017/05/02 Javascript
jQuery实现获取form表单内容及绑定数据到form表单操作分析
2018/07/03 jQuery
解决Vue.js由于延时显示了{{message}}引用界面的问题
2018/08/25 Javascript
vue实现密码显示与隐藏按钮的自定义组件功能
2019/04/23 Javascript
javascript事件监听与事件委托实例详解
2019/08/16 Javascript
详解elementUI中input框无法输入的问题
2020/04/27 Javascript
vue 自定指令生成uuid滚动监听达到tab表格吸顶效果的代码
2020/09/16 Javascript
JavaScript封装单向链表的示例代码
2020/09/17 Javascript
[46:32]Fnatic vs OG 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python获取多线程及子线程的返回值
2017/11/15 Python
Python处理CSV与List的转换方法
2018/04/19 Python
python3实现基于用户的协同过滤
2018/05/31 Python
Python使用pickle模块报错EOFError Ran out of input的解决方法
2018/08/16 Python
HTML5之WebGL 3D概述(上)—WebGL原生开发开启网页3D渲染新时代
2013/01/31 HTML / CSS
让IE9以下版本的浏览器兼容HTML5的方法
2014/03/12 HTML / CSS
Ticketmaster意大利:音乐会、节日、艺术和剧院的官方门票
2019/12/23 全球购物
一份比较全的PHP面试题
2016/07/29 面试题
年终自我鉴定
2013/10/09 职场文书
老公给老婆的保证书
2014/04/28 职场文书
大学生个人先进事迹材料范文
2014/05/03 职场文书
公共机构节能宣传周活动总结
2014/07/09 职场文书
员工安全责任书范本
2014/07/24 职场文书
幼儿园教师自荐书
2015/03/06 职场文书
2015年导购员工作总结
2015/04/25 职场文书
趣味运动会新闻稿
2015/07/17 职场文书
谢师宴学生答谢词
2015/09/30 职场文书
导游词之西江千户苗寨
2019/12/24 职场文书