jQuery 中的动画

用jQuery 做动画效果要求在标准模式 下，否则可能会引起动画抖动。标准模式即要求文件头部包含如下的DTD定义：<!DCOTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

jQuery 中的任何动画效果，都可以指定3种速度参数，即"slow","normal","fast" (时间长度分别为0.6s,0.4s,0.2s)

 

 

1.fadeIn() 与fadeOut() 方法  只改变元素的不透明度 ！fadeOut() 会在指定的一段时间内降低元素的不透明度，直到元素完全消失("display=none")。fadeIn() 方法则相反。

 

2.slideUp() 与slideDown()  方法  只会改变元素的高度 。当调用 slideDown() 时这个元素将由上至下延伸显示。  slideUp() 元素将由下到上缩短隐藏。     可以 通过slideToggle() 来在两者之间切换。

 

3. animate()   功能最强大的一个动画效果方法！形式：animate(params , speed , callback )

       params:一个包含样式属性及值的映射，如{property1:"value1",property2:"value2",...}

       speed:速度参数，可选

       callback:在动画完成时执行的函数，可选。

 

4. stop()     stop( [clearQueue] [, gotoEnd ])   参数clearQueue,gotoEnd为Boolean 值（true 或 false)。   clearQueue 代表是否要清空未执行完的动画队列，gotoEnd 代表是否直接将正在执行的动画跳转到末状态（只会跳到正在执行的动画的末状态）。

     如果直接使用stop() 方法，则会立即当前正在进行的动画，如果接下还有动画等待继续进行，则以当前状态开始接下来的动画。

 

 

判断元素是否处于动画状态

      在使用animate()方法时，要避免动画积累而导致的动画与用户的行为不一致。解决方法是判断元素是否正处于动画状态，如果元素不处于动画状态，才为元素添加新的动画，否则不添加。

      通常进行如下的判断：

               if( ! $(element).is(" :animated")){ 

                  // 如果当前没有进行动画，则添加新动画

                }