jQuery 动画笔记

在一段时间内改变 CSS 属性值，让属性值按照缓动函数的曲线增加/减少，达到平滑动画的效果，动 画的参数一般包含 3 部分，属性值、缓动函数、运动时间。
动画改变的属性值一般都是数值类型，方便缓动函数的计算,颜色除外。

内置动画
5-2.1 显示/隐藏：show()/hide() 关键属性：display:block => display:none
5-2.2 淡入/淡出：fadeIn()/fadeOut() 关键属性：opacity
5-2.3 滑上/滑下：slideUp()/slideDown() 关键属性：height

自定义动画 animate()
jQuery 动画都是基于 animate 方法来完成的，
内置动画（fadeIn/slideUp）只是预制好参数的 animate 方法的简写。
鉴于动画改变的样式最好是数字，animate 仅能改变部分样式，样式总结如下：
width/height
top/bottom/left/right
margin/padding/border-width
font-size
opacity
scrollTop

停止动画stop()
stop() 方法用于停止动画或效果，在它们完成之前。stop() 方法适用于所有 jQuery 效果函数， 包括滑动、淡入淡出和自定义动画。
$(selector).stop(stopAll, goToEnd);
可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任 何排入队列的动画向后执行。 可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。 因此，默认地，stop() 会清除在被选元素上指定的当前动画。
分步动画
用回调函数来写，分步执行动画
延迟执行 delay() 等待前一个动画执行完的毫秒数，再执行下一个动画，优点：不用嵌套，可读性好。缺点：动画不 确定是否执行完。
回调函数

$nav.find('.logo').stop().fadeOut('slow', function() { 
    $nav.find('.navbar').stop().animate({ 
        paddingLeft: 0     }); }); 

delay()

$nav.find('.navbar').stop(true, true).animate({ 
paddingLeft: "175px" }, 600); 
$nav.find('.logo').delay(600).fadeIn('slow');