jQuery动画

jQuery animate()方法让你创建自定义动画.

jQuery 动画 - animate() 方法

jQuery animate() 方法，用来创建一个自定义的动画.

语法:

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

必需的params参数，定义了将动画的CSS属性.

可选的速度参数指定特效的持续时间。它可以采取以下值："slow", "fast"，或毫秒。

可选的callback参数是动画完成后要执行的函数。

下面的示例演示了animate()方法，的简单用法; 向右移动 <div> 元素，直到达到250px:

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

让我试试

默认情况下，所有的HTML元素有一个静态的位置，无法移动。

操纵位置，记得要先设置元素位置属性是relative, fixed或者absolute！

jQuery animate() - 操作多个属性

注意动画能同时操纵多个参数：

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

让我试试

使用animate()操作所有的CSS属性是否可行?

是的，几乎所有的都能操纵！然而，有一件重要的事情要记住: 当使用animate()方法时，所有的属性必须使用驼峰命名法：: 你需要写paddingLeft代替 padding-left, marginRight代替margin-right等等.

另外，彩色动画是不包括在核心jQuery库。 如果你想要做颜色动画，你需要从jquery.com下载彩色动画插件。

jQuery animate() - 使用相对值

It is also possible to define relative values (the value is then relative to the element's current value). This is done by putting += or -= in front of the value:

也可以定义相对值（该值与元素的当前值相对值）。这是通过使用+=或者-=来实现的。

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

让我试试

jQuery animate() - 使用预先定义的值

您甚至可以指定属性的动画值为"show", "hide"或者"toggle"：

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

让我试试

jQuery animate() - 使用队列功能

默认情况下，jQuery是动画可以使用队列功能.

This means that if you write multiple animate() calls after each other, jQuery creates an "internal" queue with these method calls. Then it runs the animate calls ONE by ONE.

这意味着，如果你写多个animate()动画调用，jQuery创建一个这些方法调用"内部""队列。然后它一个接一个的运行动画调用。

所以，我们可以利用的队列功能，执行不同的动画:

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

让我试试

上面的实例首先移动<div>元素到右边, 然后增加文本字体大小:

$("button").click(function(){
    var div = $("div");
    div.animate({left: '100px'}, "slow");
    div.animate({fontSize: '3em'}, "slow");
});

让我试试