首页 > 代码库 > jquey动画

jquey动画

语法

$(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");});

 

jquey动画