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()