jquery 自定义动画

(selector).animate({styles},speed,easing,callback)

要特别注意所有用于动画的属性必须是数字的，除非另有说明；这些属性如果不是数字的将不能使用基本的jQuery功能。

比如常见的，border、margin、padding、width、height、font、left、top、right、bottom、wordSpacing等等这些都是能产生动画效果的。

background-color很明显不可以，因为参数是red或者GBG这样的值，非常用插件，否则正常情况下是不能只用动画效果的。

注意，CSS 样式使用 DOM 名称（比如 "fontSize"）来设置，而非 CSS 名称（比如 "font-size"）。

//特别注意单位，属性值的单位像素（px）,除非另有说明。单位em 和 % 需要指定使用
.animate({
    left: 50, 
     '50px'   
    opacity: 'show',  
    fontSize: "10em",
}, 500);


//除了定义数值，每个属性能使用'show', 'hide', 和 'toggle'。这些快捷方式允许定制隐藏和显示动画用来控制元素的显示或隐藏
.animate({
     "toggle"
});

//如果提供一个以+= 或 -=开始的值，那么目标值就是以这个属性的当前值加上或者减去给定的数字来计算的

.animate({ 
    left: '+=50px'
}, "slow");

.animate( properties, options )

options参数

• duration - 设置动画执行的时间
• easing - 规定要使用的 easing 函数，过渡使用哪种缓动函数
• step：规定每个动画的每一步完成之后要执行的函数
• progress：每一次动画调用的时候会执行这个回调，就是一个进度的概念
• complete：动画完成回调

<div id="div">内部动画</div> 

$("#div").animate({
       height: '50'
  }, {
     duration :2000,
      //每一个动画都会调用
   　step: function(now, fx) {
          $aaron.text('高度的改变值:'+now)
     }
})

   

动画停止 stop()

动画在执行过程中是允许被暂停的，当一个元素调用.stop()方法，当前正在运行的动画（如果有的话）立即停止

• .stop(); 停止当前动画，点击在暂停处继续开始
• .stop(true); 如果同一元素调用多个动画方法，尚未被执行的动画被放置在元素的效果队列中。这些动画不会开始，直到第一个完成。当调用.stop()的时候，队列中的下一个动画立即开始。如果clearQueue参数提供true值,那么在队列中的动画其余被删除并永远不会运行
• .stop(true,true); 当前动画将停止，但该元素上的 CSS 属性会被立刻修改成动画的目标值

$("#aaron").animate({
    height: 300
}, 5000)
$("#aaron").animate({
     300
}, 5000)
$("#aaron").animate({
    opacity: 0.6
}, 2000)


stop()：只会停止第一个动画，第二个第三个继续
stop(true)：停止第一个、第二个和第三个动画
stop(true ture)：停止动画，直接跳到 当前 动画的最终状态