jQuery中的动画效果介绍
jQuery中的动画效果
show() 显示 display:block/inline-block;
hide() 隐藏 display:none;
实现原理：在元素内部将display的属性改变
可以在()里面传递参数
数字 设置消失的时间消失时是渐变消失的
参数slow(200毫秒) normal(400毫秒) fast(600毫秒)
写错或是不写值时 默认值是normal
可以传递回调函数 可以实现列队动画
列队动画：一个动画执行完毕再执行下一个动画
实现列队动画的方法
可以通过eq()获得元素 通过将元素一层一层嵌套实现（已经很少使用）
代码如下：
CSS代码
.test{
padding:5px;
margin:5px;
background:pink;
float:left;
display:none;
}
HTML代码
<p class="test">L</p>
<p class="test">I</p>
<p class="test">K</p>
<p class="test">E</p>
<input type="button" value="show" class="show" />
<input type="button" value="hide" class="hide"/>
jQuery代码
$(function(){
$('.show').click(function(){
$('.test').eq(0).show('slow',function(){
$('.test').eq(1).show('slow',function(){
$('.test').eq(2).show('slow',function(){
$('.test').eq(3).show('slow');
});
});
});
});
});
可以通过回调函数实现异步动画
$(function(){
$('.show').click(function(){
$('.test').first().show('slow',function Sh(){
$(this).next().show('slow',Sh);
});
});
});
动画效果逐个显示用first(),next()加回调函数
动画效果逐个隐藏用last(),prev()加回调函数
toggle() 此函数可以实现点击切换的功能
实现点击隐藏和显示之间的切换功能
内部也可以传递slow、fast、normal的参数
slideUp 向上卷动
slideDown 向下卷动
slideToggle 可以实现切换 内部有自动的判断功能
fadeOut 淡出的动画效果
fadeIn 淡入的动画效果
fadeTogge 淡入淡出的切换 内部含有自动的判断功能
fadeTo 淡入淡出到 参数是小数如0.33
animate
自定义动画 可以实现多重同步动画
通过键值对的方式给元素添加多个动画
内部可以传递速度参数(fast、slow、normal)
以及回调函数(动画执行完成后执行)
可以实现元素的位移动画元素要设置position:absolute;
指定元素移动到指定的位置
可以通过'+='、'-='的方式实现累加 累减的功能
可以通过回调函数的嵌套实现列队动画
可以实现多个元素之间的列队动画 （但是效率很低 会干扰其它动画）
内部含有两种运动状态 swing 缓慢运动 linear 匀速运动 默认值为swing
代码如下：
$(function(){
$('input').click(function(){
$('p').animate({
height:'200px'
},function(){
$('p').animate({
width:'300px'
},function(){
$('p').animate({
opacity:0.5
});
});
});
});
});
在同一个元素的基础上 可以通过连缀或者顺序排列的方法实现列队动画 （不能实现多个元素之间的列队动画）
代码如下：
$('input').click(function(){
$('p').animate({width:'200px'})
.animate({height:'300px'})
.animate({opacity:0.5})
});
queue()
此方法可以实现多个元素的列队动画不会对其它的动画进行干扰 每个动画各自执行
queue() 此动画后面再执行其它的动画时 需要在次动画内部传入一个next 在动画内部进行调用 才可以使此动画后面的动画进行执行(1.4版本之后出现的方法) 不进行传参 在queue方法内部添加$(this).dequeue();(1.4版本之前使用的方法)也同样可以实现此效果
代码如下：
$('input').click(function(){
$('#box').slideUp('slow')
.slideDown('slow')
.queue(function(next){
$(this).css('background','yellow');
next();
})
.hide('slow');
});
还可以获得列队动画的长度 需要传入fx 使用count()获得列队动画的长度 （但是一般很少使用）
clearQueue() 可以实现对列队动画的清除
stop() 可以实现动画的停止
只有一个动画时 执行stop() 会将这个动画停止
有多个列队动画时 执行stop() 会停止当前的动画 继续执行下一个列队动画
内部有两个参数 第一个参数表示是否停止掉后面的所有动画内容 参数值为true时会将列队动画后面的所有动画都停止 默认值为false
第二个参数参数值为true时表示停止时 立刻跳到当前动画的最后的位置 默认值是false
delay() 时间延迟的方法 内部的参数为数值 表示
延迟的时间 单位是毫秒
arguments.callee 获取当前调用函数的本体
:animated 过滤器 可以通过次过滤器实现对运动的
动画的查找 改变它的一些属性
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>DOM操作</title>
<script type="text/javascript" src="jquery.js"></script>
<style>
#box{
height:100px; width:100px;background:red;
position:absolute; top:50px; left:0;
}
#pox{
height:100px;width:100px;background:yellow;
position:absolute; top:200px; left:0;
}
</style>
</head>
<body>
<input type="button" value="查找" id="cha" />
<p id="box">box</p>
<p id="pox">pox</p>
<script>
$(function(){
$("#box").slideToggle('slow',function(){
$(this).slideToggle('slow',arguments.callee)
});
$("#cha").click(function(){
$(':animated').css('background','blue');
});
});
</script>
</body>
</html>
动画的全局属性
$.fx.interval = 数值; 改变所有动画的运行速度
$.fx.off = true; 关闭页面中的所有动画
上一篇： ES6 属性的简洁表示法（实例）