肉渣教程

jQuery Animate

上一节 下一节

先来看个示例,点击下方按钮。

jQuery动画 - animate()方法

通过jQuery的animate()方法可用来创建一些简单动画。


animate()语法:

$(selector).animate({params}, speed, callback);

其中{params}属于必选参数,speed和callback都是非必选参数。{params}用来定义相关CSS属性以动画;speed参数指动画速度,可以取值“slow”、“fast”、具体的毫秒数;callback参数指代回调函数,即当animate方法执行完毕后再进行回调运行的函数。

如下所示,div元素会向右移动,知道其left属性等于250px才结束。

$("button").click(function(){
    $("div").animate({left: '250px'});
}); 

运行一下


默认情况下所有的HTML元素的position属性都取值static,因此不能被移动;所以如果要用animate方法,就要先把指定元素的position属性设置成relative、fixed或absolute!


animate() - 同时操作多个属性

如下所示,一次性设置多个属性,让动画更为丰富。

$("button").click(function(){
    $("div").animate({
        left: '250px',
        opacity: '0.5',
        height: '150px',
        width: '150px'
    });
}); 

运行一下


通过上述的方式,animate()可以操作元素的绝大部分属性(比如就不支持色彩相关属性)。但是,animate()设置的属性名中不能出现横杠-,比如:要用paddingLeft来代替padding-left才行,要用marginTop来代替margin-top才行。


animate() - 使用相对值

可以使用 +=-= 这类符号放在相对值前,则元素的指定属性值则是当前取值加上或减去相对值。

$("button").click(function(){
    $("div").animate({
        left: '250px',
        height: '+=150px',
        width: '+=150px'
    });
});

运行一下

animate() - 使用hide/show/toggle

可以设置元素的width属性或者height属性为hide、show或toggle,分别意味动画行为为:隐藏、显现、切换隐藏显示状态。

$("button").click(function(){
    $("div").animate({
        width: 'toggle'
    });
}); 

运行一下

animate() - 把动画连起来

批量使用animate()方法,jQuery会自动把这些动作都连贯起来。

$("button").click(function(){
    var div = $("div");
    div.animate({height: '320px', opacity: '0.4'}, "slow");
    div.animate({width: '280px', opacity: '0.8'}, "slow");
    div.animate({height: '100px', opacity: '0.4'}, "slow");
    div.animate({width: '100px', opacity: '0.8'}, "slow");
}); 

运行一下


jQuery Animate

上一节 下一节