基本特效
Prev Chapter 6. Effects 特效 Next

jquery常用的基本效果方法：

$.fn.show

显示匹配的元素

$.fn.hide

隐藏匹配的元素

$.fn.fadeIn

通过淡入的方式显示匹配元素

$.fn.fadeOut

通过淡出的方式显示匹配元素

$.fn.slideDown

通过高度变化（向下增大）用滑动动画显示一个匹配元素

$.fn.slideUp

通过高度变化（向上减小）用滑动动画隐藏一个匹配元素

$.fn.slideToggle

根据当前的元素display属性，用滑动动画显示或隐藏一个匹配元素

Example 6.1. 基本的动画效果

$('h1').show();

$.fn.show 和 $.fn.hide, 除此而外，所有的基本方法是在默认情况下，都是400毫秒延时的动画效果。改变duration属性（一个效果持续时间）是很简单。

Example 6.2. 设置动画效果持续时间

            $('h1').fadeIn(300);      // 淡入效果以 300ms延时
            $('h1').fadeOut('slow');  // using a built-in speed definition使用慢的淡出效果

jQuery 有一个对象 jQuery.fx.speeds 包含默认的速度，可以设置 "slow" 和 "fast". 

speeds: {
    slow: 600,
    fast: 200,
    //默认速度值
    _default: 400
}

它可以覆盖或添加到这个对象。例如，您可能要更改动画默认持续时间，或者您可能要创建自定义动画速度。

Example 6.3. 增加 jQuery.fx.speeds 自定义动画速度

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

通常，一旦完成动画你会想运行一些代码 - 如果你是在做动画之前运行它，可能就会影响动画的效果，也可能会删除动画的一部分元素。 [Definition: 回调函数回调函数提供一个方式去注册你感兴趣的将要发生的事件。 ]在这种情况下，我们将响应动画的事件 this是存在动画的DOM元素，如果多个元素一起做动画效果，值得注意的是这个回调函数在每个匹配元素上只调用一次，不是这个动画作为一个整体 。(这个地方没翻译对。。。。。。。。。。)

Example 6.4. 动画执行完后运行代码

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

注意，如果您选择不返回任何元素，您的 回调将不会执行！你可以通过测试是否选择任何元素来解决这个问题；如果没有， 你可以立即执行回调。

Example 6.5.  运行回调函数即使没设置任何参数 

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

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

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

Copyright Rebecca Murphey, released under the Creative Commons Attribution-Share Alike 3.0 United States license.

Prev Up Next
Chapter 6. Effects 特效 Home 使用$.fn.animate自定义效果