用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")){
// 如果当前没有进行动画,则添加新动画
}