[JQuery] JQuery第五课

说明

本文转自菜鸟教程。

JQuery动画

JQuery animate()方法用于创建自定义动画，其语法如下：

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

必须的params参数定义形成动画的CSS属性，可选的 speed 参数规定效果的时长。它可以取以下值：”slow”、”fast” 或毫秒，可选的 callback 参数是动画完成后所执行的函数名称，例如：

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

默认情况下，所有HTML元素都有一个静态位置，且无法移动，如需对位置进行操作，要记得首先将元素的CSS position属性设置为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等。

JQuery animate() 使用相对值

animate()也可以使用相对值，需要在值的前面加上+=或-=，例如：

$("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提供指针动画的队列功能，这意味着可以编写多个animate()调用，JQuery会包含这些方法调用的内部队列，然后逐一运行这些animate调用，例如：

$("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({height:'100px', opacity:'0.8'}, "slow");
})

JQuery stop()方法 停止动画

JQuery stop()方法用于停止动画，在它们完成之前。stop()方法适用于所有JQuery效果函数，包括滑动、淡入淡出和自定义动画，其语法如下：

$(selctor).stop(stopAll, goToEnd);

可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。因此，默认地，stop() 会清除在被选元素上指定的当前动画。

JQuery Callback()方法

Callback函数在当前动画100%完成之后执行，例如：

$("button").click(function() {
    $("p").hide("slow", function() {
        alert("段落现在被隐藏了");
    });
});

JQuery 链（Chaining）

通过JQuery，可以将动作/方法链接在一起，Chaining允许我们在一条语句中运行多个JQuery方法（在相同的元素上）。

举个例子，下面的例子将css()、slideUp()和slideDown()链接在一起：

$("#p1").css("color", "red").slideUp(2000).slideDown(2000);