发布在：效果

效果简介

link 显示和隐藏内容

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 );

大多数开发人员传入毫秒数以更精确地控制持续时间。

link 淡入淡出和滑动动画

您可能注意到，.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 );

link 根据当前可见性状态更改显示

jQuery 还可以让您根据内容的当前可见性状态更改其可见性。.toggle() 将显示当前隐藏的内容并隐藏当前可见的内容。您可以将与上述任何效果方法传递给 .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 );

link 在动画完成后执行某些操作

在实现 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();
}

link 管理动画效果

jQuery 提供了一些附加功能来控制您的动画

link .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 );

link .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 );

link 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 );