jquey动画

Posted 2020-09-23

语法

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

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

 

 

 

几个要点：

• css属性值使用相对值
• css属性使用预定义值（"show"、"hide" 或 "toggle"）
• 动画队列

 

实例：

$("button").click(function(){
    $("div").animate({
        "left": "500px",
        "opacity": "0"
    }, "slow", function(){
        console.log("第一步");
    });

    $("div").animate({
        "top": "+=300px",
        "background-color": "yellow",
        "opacity": "1"
    }, "fast", function(){
        console.log("第二步");
    });

    $("div").animate({
        "left": "-=500px",
        "background-color": "purple"
    }, "slow");

    $("div").animate({
        "top": "0px",
        "background-color": "red"
    }, "fast");

    $("div").animate({
        "height": "hide"
    }, "fast");

});