| 方法 | 介绍 | 示例 |
|---|---|---|
| hide() | 隐藏 | $("ele").hide(500) |
| show() | 显示 | $("ele").hide(500) |
| fadeOut() | 淡出 改变透明度至隐藏 | |
| fadeIn() | 淡入 改变透明度至显示 | |
| slideDown() | 由上到下显示 | |
| slideUp() | 由下到上隐藏 | |
| toggle() | 切换元素的 可见状态 | |
| slideToggle() | 通过改变元素的高度来切换可见状态 | |
| fadeToggle() | 通过改变元素的透明度来切换可见状态 | |
| fadeTo() | 改变元素至固定的透明度 | $('elel').fadeTo(600,.5); |
自定义动画animate()
animate(params,speed,callback)
params:包含样式属性及值到映射
cllback：动画执行完成后到回调函数 适用与以上所有的JQ动画
$('.btn').click(function(){
var a = function(){
console.log(1);
};//回调函数
$(this).next().animate({'width':'300px','height':'300px'},2000,a);
});
累加累减动画 “+=”实现累加累减动画
$('.btn').click(function(){
$(this).next().animate({left:'+=100px'},200);
});
多重动画同时执行
$(this).next().animate({'left':'+=100px','top':'+=100px'},200);});
多重动画先后执行
$(ele) .animate({'left':'+=100px'},200).animate({top:'+=100px'},200);
停止动画和判断是否处于动画状态
stop([clearQueue],[gotoEnd])
clearQueueb 布尔值表示是否要清空执行完成的队列动画
gotoEnd 是否直接将正在执行的动画跳转到末尾
直接使用stop()会立即停止当前正在进行的动画，并立即执行队列中的下一个动画 常用于解决类似用户操作过快的情况
需要给stop()添加参数的情况
$('.test').hover(function(){
$(this).stop(true)
.animate({'width':'+=200px'},1500)//如果不设置stop(true)属性此时触发光标移出事件，将执行下一步高度动画，而不是光标移除动画
.animate({height:'200px'},1500);
},function(){
$(this).stop(true)//通过设置第一个true参数 解决上面的问题
.animate({'width':'100px'},1500)
.animate({height:'100px'},1500);
});
is(":animated")判断是否在动画中，常用方法
$('.btn').click(function(){
if(! $(this).next().is(":animated")){
$(this).next().animate({'width':'+=200px'},500);
}
});
delay()延迟动画
可以讲队列中的动画延迟操作，也可以用于自定义队列
$('.btn').click(function(){
if(! $(this).next().is(":animated")){
$(this).next().animate({'width':'+=200px'},500)
.delay(1000)//延迟动画
.animate({height:"+=200px"});
}
});
