Javascript - Jquery - 动画

动画（Dynamic）

JQuery动画必须是在标准文档下使用 否则可能引起动画时抖动或其它不可预知的结果，标准文档格式：

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

动画函数

show(speed, callBack)
//speed：动画速度，可能的值有 slow（600毫秒）、fast（200毫秒）、normal（400毫秒）、自定义毫秒
//callBack：回调，可选
//以动画的方式显示事前被隐藏的元素

hide(speed, callBack)
//以动画的方式隐藏事前已经显示的元素

fadeIn(speed, callBack)
//在指定的时间内将该元素的透明度逐步增高

fadeOut(speed, callBack)
//在指定的时间内将该元素的透明度逐步减少（非隐藏）

slideDown(speed, callBack)
//将隐藏的元素以从上往下逐步展开的动画方式显示出来

slideUp(speed, callBack)
//将事前已经显示的对象以从下往上收拢的动画方式隐藏（table无效）

toggle(speed)
//切换元素的可见性

slideToggle(speed)
//如果该对象事前是显示的，则将该对象从下往上收拢直至隐藏，否则将该对象从上往下展开直至完全显示

animate(params, speed, callBack)
//params：匿名对象，用于设置元素的css，使该对象出现params指定的css动画效果

stop(clear, goToEnd)
//clear：指示是否清空还未执行的动画队列
//goToEnd：指示是否直接将正在执行的动画跳转到末状态
//如果参数不存在，会立即停止动画，如果接下来还有动画队列等待执行就继续执行下一个动画
//示例：
$('div').click(function () {
    $(this).animate({ 'left': '300' }, 1000);
});
$('div').click(function () {
    $(this).animate({ 'left': '-=300' }, 1000);
});

动画积累

当用户不停的在一个动画对象上进行操作就会造成动画积累，可以使用is方法来测试该对象是否正处于动画状态，如果没有处于动画状态才为其添加动画，否则不执行任何操作

$('p').mouseover(function () {
    if (!$('p').is(':animated')) {
        $(this).animate({ 'left': '+=200' }, 3000)
    }
});

　　

Javascript - 学习总目录