发布于：特效 (Effects)

特效入门

链接 显示和隐藏内容

jQuery 可以使用 .show() 或 .hide() 瞬间显示或隐藏内容。

1
2
3
4
5
 
// Instantaneously hide all paragraphs
$( "p" ).hide();
 
// Instantaneously show all divs that have the hidden style class
$( "div.hidden" ).show();

当 jQuery 隐藏一个元素时，它会将其 CSS display 属性设置为 none。这意味着内容将具有零宽度和零高度；这并不意味着内容只是变透明并在页面上留下空白区域。

jQuery 还可以通过动画效果来显示或隐藏内容。你可以通过几种方式告诉 .show() 和 .hide() 使用动画。一种是传入参数 'slow'、'normal' 或 'fast'。

1
2
3
4
5
 
// Slowly hide all paragraphs
$( "p" ).hide( "slow" );
 
// Quickly show all divs that have the hidden style class
$( "div.hidden" ).show( "fast" );

如果你希望更直接地控制动画效果的持续时间，可以将所需的毫秒数传递给 .show() 和 .hide()。

1
2
3
4
5
 
// Hide all paragraphs over half a second
$( "p" ).hide( 500 );
 
// Show all divs that have the hidden style class over 1.25 seconds
$( "div.hidden" ).show( 1250 );

大多数开发者会传入毫秒数，以便更精确地控制时长。

链接 渐变和滑动动画

你可能已经注意到，当以动画方式显示和隐藏内容时，.show() 和 .hide() 使用了滑动和渐变效果的组合。如果你更倾向于仅使用其中一种效果来显示或隐藏内容，还有其他方法可以使用。.slideDown() 和 .slideUp() 分别仅使用滑动效果来显示和隐藏内容。滑动动画是通过快速更改元素的 CSS height 属性来实现的。

1
2
3
4
5
 
// Hide all paragraphs using a slide up animation over 0.8 seconds
$( "p" ).slideUp( 800 );
 
// Show all hidden divs using a slide down animation over 0.6 seconds
$( "div.hidden" ).slideDown( 600 );

同样，.fadeIn() 和 .fadeOut() 分别通过渐变动画来显示和隐藏内容。渐变动画涉及快速更改元素的 CSS opacity（透明度）属性。

1
2
3
4
5
 
// Hide all paragraphs using a fade out animation over 1.5 seconds
$( "p" ).fadeOut( 1500 );
 
// Show all hidden divs using a fade in animation over 0.75 seconds
$( "div.hidden" ).fadeIn( 750 );

链接 根据当前可见状态更改显示

jQuery 还可以让你根据内容当前的可见状态来更改其可见性。.toggle() 会显示当前隐藏的内容，并隐藏当前可见的内容。你可以向 .toggle() 传递与上述任何特效方法相同的参数。

1
2
3
4
5
6
7
8
 
// Instantaneously toggle the display of all paragraphs
$( "p" ).toggle();
 
// Slowly toggle the display of all images
$( "img" ).toggle( "slow" );
 
// Toggle the display of all divs over 1.8 seconds
$( "div" ).toggle( 1800 );

.toggle() 会像 .show() 和 .hide() 一样使用滑动和渐变的组合效果。你也可以使用 .slideToggle() 和 .fadeToggle() 来仅通过滑动或渐变切换内容的显示。

1
2
3
4
5
 
// Toggle the display of all ordered lists over 1 second using slide up/down animations
$( "ol" ).slideToggle( 1000 );
 
// Toggle the display of all blockquotes over 0.4 seconds using fade in/out animations
$( "blockquote" ).fadeToggle( 400 );

链接 在动画完成后执行操作

在实现 jQuery 特效时，一个常见的错误是假设链式调用中的下一个方法会等待动画运行完成后再执行。

1
2
 
// Fade in all hidden paragraphs; then add a style class to them (not quite right)
$( "p.hidden" ).fadeIn( 750 ).addClass( "lookAtMe" );

重要的是要意识到，上面的 .fadeIn() 只是启动了动画。一旦开始，动画是通过在 JavaScript 的 setInterval() 循环中快速更改 CSS 属性来实现的。当你调用 .fadeIn() 时，它启动动画循环，然后返回 jQuery 对象，将其传递给 .addClass()，后者将在动画循环刚刚开始时添加 lookAtMe 样式类。

要将某个动作延迟到动画运行完成后执行，你需要使用动画回调函数。你可以将动画回调指定为传递给上述任何动画方法的第二个参数。对于上面的代码片段，我们可以如下实现回调：

1
2
3
4
5
 
// Fade in all hidden paragraphs; then add a style class to them (correct with animation callback)
$( "p.hidden" ).fadeIn( 750, function() {
    // this = DOM element which has just finished being animated
    $( this ).addClass( "lookAtMe" );
});

请注意，你可以使用关键字 this 来引用正在执行动画的 DOM 元素。还要注意，回调将针对 jQuery 对象中的每个元素被调用。这意味着如果你的选择器没有返回任何元素，你的动画回调将永远不会运行！你可以通过测试选择是否返回了元素来解决此问题；如果没有，你可以直接运行回调。

1
2
3
4
5
6
7
8
9
10
11
12
 
// Run a callback even if there were no elements to animate
var someElement = $( "#nonexistent" );
 
var cb = function() {
    console.log( "done!" );
};
 
if ( someElement.length ) {
    someElement.fadeIn( 300, cb );
} else {
    cb();
}

链接 管理动画效果

jQuery 提供了一些额外的功能来控制你的动画：

链接 .stop()

.stop() 会立即终止在所选元素上运行的所有动画。你可以通过设置一个按钮供终端用户点击来停止动画，从而让他们控制页面动画。

1
2
3
4
5
6
7
 
// Create a button to stop all animations on the page:
$( "<button type='button'></button>" )
    .text( "Stop All Animations" )
    .on( "click", function() {
        $( "body *" ).filter( ":animated" ).stop();
    })
    .appendTo( document.body );

链接 .delay()

.delay() 用于在连续的动画之间引入延迟。例如：

1
2
3
 
// Hide all level 1 headings over half a second; then wait for 1.5 seconds
// and reveal all level 1 headings over 0.3 seconds
$( "h1" ).hide( 500 ).delay( 1500 ).show( 300 );

链接 jQuery.fx

jQuery.fx 对象具有许多控制特效实现方式的属性。jQuery.fx.speeds 将上述的 slow、normal 和 fast 时长参数映射到特定的毫秒数。jQuery.fx.speeds 的默认值为：

1
2
3
4
5
 
{
    slow: 600,
    fast: 200,
    _default: 400 // Default speed, used for "normal"
}

你可以修改这些设置，甚至引入你自己的设置：

1
2
3
 
jQuery.fx.speeds.fast = 300;
jQuery.fx.speeds.blazing = 100;
jQuery.fx.speeds.excruciating = 60000;

jQuery.fx.interval 控制动画中每秒显示的帧数。默认值是连续帧之间间隔 13 毫秒。你可以为性能更好的浏览器将其设置为更低的值，以使动画运行得更流畅。然而，这意味着每秒会有更多帧，从而给浏览器带来更高的计算负荷，因此你应该确保彻底测试这样做带来的性能影响。

最后，可以将 jQuery.fx.off 设置为 true 以禁用所有动画。元素将立即被设置为目标最终状态。这在处理旧版本浏览器时特别有用；你可能也想为用户提供禁用所有动画的选项。

1
2
3
4
5
6
 
$( "<button type='button'></button>" )
    .text( "Disable Animations" )
    .on( "click", function() {
        jQuery.fx.off = true;
    })
    .appendTo( document.body );