jQuery的动画效果

jQuery animate() 方法用于创建自定义动画。

语法：

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

 params 参数是必须存在的，它定义形成动画的 CSS 属性。

一下代码是简单的animate()函数的应用

 

 

开始动画
默认情况下，所有的 HTML 元素有一个静态的位置，且是不可移动的。 
如果需要改变为，我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!

运行结果截图：

形成了简单的动画效果

注意：默认情况下，所有 HTML 元素都有一个静态位置，且无法移动。
如需对位置进行操作，要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute！

$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({
      left:'250px',
      height:'+=150px',//在当前基础上高度加上150像素点
      width:'+=150px'

这个执行一次后，会在每一次执行后的基础上变大。或变小。

可以把属性的动画值设置为 "show"、显示"hide"隐藏 或 "toggle"切换：
$("button").click(function(){
  $("div").animate({
    height:'toggle'
  });
}); 

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

编写多个 animate() 调用，jQuery 会创建包含这些方法调用的"内部"队列。然后逐一运行这些 animate 调用。

这些代码逐个实现。