jquery动画总结

基本动画

• show() //直接显示元素，没有动画
• show(speed, [callback]) //有动画，有回调函数
• hide() //直接隐藏元素，没有动画
• hide(speed, [callback]) //有动画，有回调函数
• toggle() //切换可见状态
• toggle(speed, [callback]) //有动画效果
• toggle(switch) //switch决定是显示还是隐藏

滑动动画

• slideDown(speed, [callback]) //向下增加高度，以显示内容，有动画效果
• slideUp(speed, [callback]) //向上减小高度，以隐藏内容，有动画效果
• slideToggle(speed, [callback]) //动态改变高度，动态显示和隐藏

淡入淡出动画

• fadeIn(speed, [callback]) //淡入效果，动画结束会改变display来 显示 元素
• fadeOut(speed, [callback]) //淡出效果，动画结束会改变display来 隐藏 元素
• fadeTo(speed, opacity, [callback]) //动态改变透明度效果，不影响display属性

自定义动画

1. animate(params, [duration], [easing], [callback])
   • 属性值一般为数字，也可以是hide，show，toggle关键字
   • 属性值也可以是数组形式，第一个数组元素是属性的最终状态，第二个数组元素是缓动函数
   • 不能使用margin-left这种形式，而需要使用驼峰形式marginLeft
   • 可以使用em和%，也可以使用 += 或者 -= 让元素做相对运动
   • 如果duration=0，那么直接完成动画
2. animate(params, options)
   • 基本同上
   • 需要注意easing和specialEasing参数，前面提到过params中也可以设置缓动函数，需要注意优先级
   • queue参数决定当前动画是否加入队列，默认值为true，表示加入默认队列fx；如果是false代表不加入队列；如果是字符串，代表加入自定义队列，加入自定义队列后不会自动运行而需要自己调用dequeue(queueName)来启动
   • step参数表示执行动画的每一步，可以用来实现自定义动画
3. stop([queueName], [clearQueue], [gotoEnd])
   • 如果clearQueue=true，那么清空动画队列
   • 如果gotoEnd=true，那么立即完成当前动画，可能会有闪烁现象
4. 对animate函数的总结：
   • 一个元素调用animate设置多个属性，代表多个属性同时动画
   • 一个元素调用多次animate，那么动画效果是一个接着一个的
   • 多个元素分别调用animate，那么多个元素同时动画
   • 可以利用回调函数实现多个元素一个接着一个动画
   • 下面使用动画队列实现多个元素一个接着一个动画，不依赖回调函数

动画队列

1. queue([queueName]) //返回数组，代表事件队列
2. queue([queueName], [queueArray]) //替换队列，如果是空数组也可以达到清空队列的目的
3. queue([queueName], [callback]) //添加函数到队列
4. dequeue([queueName]) //返回下一个函数，并且执行它，该函数必须直接或者间接的调用dequeue函数，直到队列为空
5. clearQueue([queueName]) //清空队列
6. delay(duration, [queueName]) //添加延迟到队列中
7. 动画队列总结：
   • 除去show();hide();toggle();这些不带参数的函数，其它动画函数都会添加到队列中
   • 动画队列和Promise有点像，但还是不一样，Promise函数每次调用返回值都是Deferred对象，所以可以链式调用；动画队列是依靠循环调用dequeue函数来实现一个接着一个执行函数。
   • 动画队列和动画队列名称是相关的，默认名称是 fx ，但是和调用对象也是相关的。
   • 可以添加任意函数到队列中，就算是ajax，setTimeout等异步函数，咱也可以在其回调函数中调用dequeue函数，从而达到依次执行的目的。

动画全局控制

1. jquery.fx.off=true; 没有动画效果，立即完成动画
2. jquery.fx.interval=13; 动画间隔，默认值是13，值越小，动画效果越流畅，也更加消耗CPU资源；值越大，动画效果就越不流畅。

判断是否正在动画

$this.is(":animated");

扩展animate函数

主要就是扩展$.fx.step对象，比如：

// jquery.path.js插件，实现贝塞尔曲线动画

jQuery.fx.step.path = function(fx) {

  var css = fx.end.css( 1 - fx.pos );

  if ( css.prevX != null ) {

    jQuery.cssHooks.transform.set( fx.elem, "rotate(" + Math.atan2(css.prevY - css.y, css.prevX - css.x) + ")" );

  }

  fx.elem.style.top = css.top;

  fx.elem.style.left = css.left;

};

// jQuery UI 颜色动画

jQuery.fx.step[ hook ] = function( fx ) {

   if ( !fx.colorInit ) {

      fx.start = color( fx.elem, hook );

      fx.end = color( fx.end );

      fx.colorInit = true;

   }

   jQuery.cssHooks[ hook ].set( fx.elem, fx.start.transition( fx.end, fx.pos ) );

};

// animate函数可以实现size属性动画效果

jQuery.fx.step['size'] = function(fx)

{

   if ( !fx._sizeInit )

   {

      var \$el = \$(fx.elem),

          c = fx.end.center || {top: 0, left: 0};

      fx.start = \$el.offset();

      $.extend(fx.start, {width: $el.width(), height: $el.height()});

      fx._sizer = {};

      fx._sizer.topDelta = c.top - (c.top * fx.end.height / fx.start.height);

      fx._sizer.leftDelta = c.left - (c.left * fx.end.width / fx.start.width);

      fx._sizer.widthDelta = fx.end.width - fx.start.width;

      fx._sizer.heightDelta = fx.end.height - fx.start.height;

      fx._sizeInit = true;

   }

   fx.elem.style.top = fx.start.top + Math.floor(fx._sizer.topDelta * fx.pos) + 'px';

   fx.elem.style.left = fx.start.left + Math.floor(fx._sizer.leftDelta * fx.pos) + 'px';

   fx.elem.style.width = fx.start.width + Math.floor(fx._sizer.widthDelta * fx.pos) + 'px';

   fx.elem.style.height = fx.start.height + Math.floor(fx._sizer.heightDelta * fx.pos) + 'px';

}

参考文章

1. Extending jQuery Animate() Beyond Basic CSS Animation
2. Extending jQuery Animation - Custom Property "Size"
3. The jQuery animate() step callback function
4. weepy/jquery.path
5. test: jquery.path animation
6. louisremi/jquery.path
7. jQuery Scroll Path自定义轨迹路径插件--制作圆形动画循环组合导航菜单

注意：

1. 代码中$前面的 \ 是避免markdown解析错误而添加的
2. 参考文章中最后一个链接被博客园禁止了，去掉链接中的 %3D 就好了