Web前端基础(18)jQuery中的动画

show()和hide()

show()和hide()是jQuery中最基本的动画方法,该动画操作了display:none;

1
2
3
4
5
6
7
$(function(){
$("#panel").toggle(function(){
$(this).next().hide();
}, function(){
$(this).next().show();
})
})

show()和hide()可以传入动画执行毫秒数或者传入“nomal”, “slow”, “fast”关键字控制速度。

fadeIn()和fadeOut()

fadeIn()和fadeOut()只是改变透明度。

slideUp()和slideDown()

slideUp()和slideDown()只会改变元素的高度(由上到下展开, 由下到上收起)。

自定义动画animate()

1
animate(params, speed, callback);

参数说明:
params: 一个包含样式属性和值的映射
speed:速度参数,可选
callback:动画完成时执行的函数,可选

1
2
3
4
5
$(function(){
$("#panel").click(function(){
$(this).animate({left:"500px"}, 3000);
})
})

累加,累减

如果将left:”500px”改为 left:”+=500px”含义就变成了在当前位置累加500px

多重动画

1
2
3
$("#myImg").click(function(){
$(this).animate({left:"500px", height:"200px"}, 3000);
})

顺序执行多个动画

1
$(this).animate({left:"500px"}, 3000).animate({height:"200px"}, 3000);

停止动画

1
stop([clearQueue].[gotoEnd]);

参数clearQueue和gotoEnd都是可选参数,为boolean值,clearQueue代表是否要清空未执行完的动画队列,gotoEnd代表是否直接将正在执行的动画跳到末状态。如果直接用stop()则会立即停止当前动画,如果队列还有动画,则以当前状态继续执行下面的动画。

1
2
3
4
5
$("#panel").hover(function(){
$(this).stop(true).animate({height:"150", width:"300"}, 200);
}, function(){
$(this).stop(true).animate({height:"22", width:"60"}, 300);
})

判断是否动画状态

1
2
3
if(!$(element).is(":animated")){ 
//不在动画状态,可以添加新动画
}

延迟动画

在动画执行过程中,如果想对动画进行延迟操作,那么可以使用delay()方法,使用方式如下:

1
2
3
4
5
$(this).animate({left:"400px", height:"200px", opacity:"1"}, 3000)
.delay(1000)
.animate({top:"200px", width:"200px"}, 3000)
.delay(2000)
.fadeOut("slow");

其他动画方法

除了上面的动画外,jQuery中还有4个专门用于交互的动画。

toggle()

toogle()方法可以切换元素的可见状态。

1
2
3
$("#panel h5.head").click(function(){
$(this).next().toggle();
})

slideToggle()

通过改变高度来切换元素的可见状态。

fadeTo()

把元素的透明度通过渐进的方式调整到指定值,这个动画只调整元素的不透明度。

1
2
3
$("#panel h5.head").click(function(){
$(this).next().fadeTo(600, 0.2);
})

fadeToggle()

通过改变透明度来切换元素的可见状态。

动画方法概括

方法名 说明
hide()和show() 同时修改多个样式属性,即高度、宽度、不透明度
fadeIn()和fadeOut() 只改变不透明度
slideUp()和slideDown() 只改变高度
fadeTo() 只改变不透明度
toggle() 用了替代hide()和show()方法
slideToggle() 用来替代slideUp()和slideDown()
fadeToggle() 用来替代fadeIn()和fadeOut
animate() 自定义动画,上面动画实质上都调用了animate()