jquery调用animate()方法制作动画效果

2015-01-28 15:31:45

jquery调用animate()方法制作动画效果

调用animate()方法可以创建自定义动画效果，它的调用格式为：

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

其中，params参数为制作动画效果的CSS属性名与值，speed参数为动画的效果的速度，单位为毫秒，可选项callback参数为动画完成时执行的回调函数名。

调用animate()方法不仅可以制作简单渐渐变大的动画效果，而且还能制作移动位置的动画，在移动位置之前，必须将被移元素的“position”属性值设为“absolute”或“relative”，否则，该元素移动不了。

CSS样式

  1. span 
  2. { 
  3.     position:absolute; 
  4.     width:80px; 
  5.     height:80px; 
  6.     border: solid 1px #ccc; 
  7.     margin: 0px 8px; 
  8.     background-color: Red; 
  9.     color:White; 
  10.     vertical-align:middle 
  11. } 
  1. <body> 
  2.      <h3>制作移动位置的动画</h3> 
  3.      <span></span> 
  4.      <div id="tip"></div> 
  5.       
  6.      <script type="text/javascript"> 
  7.          $(function () { 
  8.              $("span").animate({ 
  9.                  left: "+=100px" 
  10.              }, 3000, function () { 
  11.                  $(this).animate({ 
  12.                      height: '+=30px', 
  13.                      width: '+=30px' 
  14.                  }, 3000, function () { 
  15.                      $("#tip").html("执行完成!"); 
  16.                  }); 
  17.              }); 
  18.          }); 
  19.      </script> 
  20.  </body> 
  21. tml> 

 

为您推荐