jQuery 动画效果

jQuery 可以很方便的为页面中的元素添加一些动态效果,可以用其内建效果,也可以自己定义效果。

下面是一些内建的效果方法:

$.fn.show 显示所选择的元素

$.fn.hide 隐藏所选择的元素

$.fn.fadeIn 淡入

$.fn.fadeOut 淡出

$.fn.slideDown 通过垂直滑动的效果来显示元素

$.fn.slideUp 通过垂直华东的效果来隐藏元素

$.fn.slideToggle 显示滑动或隐藏滑动交互执行

一个简单的例子:

$('h1').show();

设置动画效果的时长

对于 $.fn.show$.fn.hide 而言,默认情况下其时长是 0,其它效果的默认时长一般是 400 毫秒,当然也自己设置时长:

$('h1').fadeIn(300);      // 300 毫秒
$('h1').fadeOut('slow');  // slow 是内建的速度常量

jQuery 默认的速度常量都位于 jQuery.fx.speeds 对象中:

speeds: {
    slow: 600,
    fast: 200,
    // Default speed
    _default: 400
}

我们也可以扩展这个对象,添加自己常用的速度值:

jQuery.fx.speeds.blazing = 100;
jQuery.fx.speeds.turtle = 2000;

回调函数

如果想在动画效果结束后再执行一些代码,那么可以给这些动画方法换入一个回调函数:

$('div.old').fadeOut(300, function() {
	$(this).remove();
});

如果选择器中没有匹配到任何元素,那么回调函数也不会被执行,所以在执行回调函数前做个判断是有必要的:

var $thing = $('#nonexistent');

var cb = function() {
    console.log('done!');
};

if ($thing.length) {
    $thing.fadeIn(300, cb);
} else {
    cb();
}

自定义动画方法

jQuery 中的 $.fn.animate 方法可以用来扩展我们的自定义动画,主要是通过 animate 方法设置元素 CSS 属性来实现的,设置元素 CSS 属性的时候可以使用绝对值,也可以使用相对值:

$('div.funtimes').animate(
    {
        left : "+=50",
        opacity : 0.25
    },
    300, // 时长
    function() { console.log('done!'); // 回调函数
});

但是,用 $.fn.animate 创建自定义动画效果时,不能改变元素的颜色。如果要创建颜色动画,需要依赖其它一些颜色插件

动画的风格

jQuery 内建的动画风格有两种:swinglinear

$('div.funtimes').animate(
    {
        left : [ "+=50", "swing" ],
        opacity : [ 0.25, "linear" ]
    },
    300
);

控制动画

jQuery 提供了几个方法用来控制动画的执行:

$.fn.stop 停止当前正在执行的动画

$.fn.delay 使动画暂停一段时间:

$('h1').show(300).delay(1000).hide(300);

jQuery.fx.off :关闭动画的过度效果,相当于把时长设为 0。

via http://jqfundamentals.com

Posted on 2012-03-07

No Comments

Leave a Comment