jQuery animate()方法使用指南

文章目录

在今天之前,我对jQuery的中的animate()方法还停留在最常见的用法,查了一下手册,发现在1.8的时候增加了几个比较有用的回调函数,比如progress(A function to be called after each step of the animation, only once per animated element regardless of the number of animated properties.)就是说每个动画元素无论你有多少个动画属性,每一步动画后只会回调一个函数,即元素在运动的过程中,你可以通过这个回调函数,执行一些代码,太有用了,这个属性。其他的属性就很常规了。下面一起看看。

格式和参数

animate的有两种不同的调用方式,大部分参数是可选的。在今天之前,我只知道第一种调用方式,看来这个jQuery API还是看官网最合适。

  • animate(properties[, duration][, easing][, callback])
  • animate(properties[, options])

关于上面这些参数,有很多可以说的。我们比较熟悉的第一个格式自然不用说了。

  • properties:动画属性
  • duration: (默认: 400)动画运行时间
  • easing:(默认: swing)动画的运行方式
  • callback:动画完成之后的回调函数

下面关键说说第二个格式里的options有哪些选项:

  • duration:同上
  • easing:同上
  • queue: (default: true) A Boolean indicating whether to place the animation in the effects queue.(是否将动画放置在效果队列中)
  • specialEasing:由此方法的第一个参数properties定义的一个或多个CSS属性,及其相应的缓动函数组成的键值对map。( 1.4 新增)
  • step:Function( Number now, Tween tween ) 每个动画元素的每个动画属性将调用的函数。
  • progress: Function( Promise animation, Number progress, Number remainingMs ) 每一步动画完成后调用的一个函数,无论动画属性有多少,每个动画元素都执行单独的函数。
  • complete:在动画完成时执行的函数。
  • done:在动画完成时执行的函数。
  • fail:动画失败完成时执行的函数。
  • always:在动画完成或未完成情况下停止时执行的函数。

案例使用

单一动画属性

<div class="rectangle">
   <div class="square-small"></div>
</div>
.rectangle
{
   width: 300px;
   height: 20px;
   display: block;
   position: relative;
   border: 1px solid black;
   margin: 20px 0;
}

.square-small
{
   display: block;
   width: 20px;
   height: 20px;
   position: absolute;
   background-color: red;
}
$('.rectangle')
   .find('.square-small')
   .animate({
      left: 280
    }, 'slow');

演示

多个属性动画

<div class="square-big">
   <div class="square-small"></div>
</div>
.square-big
{
   width: 300px;
   height: 300px;
   display: block;
   position: relative;
   border: 1px solid black;
   margin: 20px 0;
}
(function animation() {
   var options = {
      duration: 800,
      easing: 'linear'
   };

   $('.square-big')
      .find('.square-small')
      .animate({
            left: 280,
            top: 280
         },
         options
      )
      .animate({
            left: 0,
         },
         options
      )
      .animate({
            left: 280,
            top: 0,
         },
         options
      )
      .animate({
            left: 0,
         },
         $.extend(true, {}, options, {
            complete: function() {
               animation();
            }
         })
      );
})();

演示

第二种格式

演示start、complete和progress

<div class="rectangle">
   <div class="square-small"></div>
</div>
<button id="animation-button">Run!</button>
<span id="percentage">0</span>%
$('#animation-button').click(function() {
   var $button = $(this);

   $('.rectangle')
      .find('.square-small')
      .animate({
            left: 280
         },
         {
            duration: 2000,
            start: function() {
               $button.prop('disabled', true);
            },
            complete: function() {
               $button.prop('disabled', false);
            },
            progress: function(animation, progress) {
               $('#percentage').text(Math.round(progress * 100));
            }
         }
      );
});

演示 演示2

原文链接:jQuery animate()方法使用指南 版权所有,转载时请注明出处,违者必究。
注明出处格式:前端开发博客 (http://caibaojian.com/jquery-animate.html)

发表评论

请登录后发表评论: