jQuery - Effects

完整文档：Effects documentation on api.jquery.com

简介

显示隐藏内容

jQuery 通过 .show() .hide() 来立即显示或者隐藏内容

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

当 jQuery 隐藏某个元素后，会设置该元素的 CSS display 属性为：none。意味着该元素的内容的宽和高为 0。

加入动画过度

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

// 单位为：毫秒
// 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 );

---

逐渐消失和滑入动画

// 改变 CSS height 属性
// 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 );

// 改变 CSS opicaty 属性
// 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 );

基于当前的显示状态来改变元素的显示状态

.toggle() 切换显示和隐藏状态

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

---

在动画完成之后做一些其他事情

// 不太正确的方式
// Fade in all hidden paragraphs; then add a style class to them (not quite right)
$( "p.hidden" ).fadeIn( 750 ).addClass( "lookAtMe" );

/*
此种方式，在动画开始时，
就会将样式类加入元素，而不是等到动画执行完成
*/

使用回调函数，解决此种问题。

// 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" );
});

// 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();
}

---

管理动画效果

.stop() 立即终止该元素运行中的所有动画。

// 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() 用于在动画之间插入间隔。

// 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 对象中有许多属性来控制动画执行的效果

{
    slow: 600,
    fast: 200,
    _default: 400 // Default speed, used for "normal"
}

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

/*
jQuery.fx.interval
控制动画每秒显示的帧数
*/

/*
jQuery.fx.off
设置为 true 来取消所有的动画
*/
$( "<button type='button'></button>" )
    .text( "Disable Animations" )
    .on( "click", function() {
        jQuery.fx.off = true;
    })
    .appendTo( document.body );

---

自定义动画

使用 .animate() 来设置自定义动画。

注意：与颜色相关的属性不能通过该方法来设置。颜色属性相关的动画，通过插件来实现，完整文档：color plugin

完整文档：Animation documentation on api.jquery.com

// Custom effects with .animate()
$( "div.funtimes" ).animate(
    {
        left: "+=50",
        opacity: 0.25
    },
 
    // Duration
    300,
 
    // Callback to invoke when the animation is finished
    function() {
        console.log( "done!" );
    }
);

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

---

队列 & 出列

$( ".box" )
    .animate( {
        height: 20
    }, "slow", function() {
        $( "#title" ).html( "We're in the callback, baby!" );
    } );

队列作为回调函数

$( ".box" )
    .animate( {
        height: 20
    }, "slow")
    .queue( function() {
        $( "#title" ).html( "We're in the animation, baby!" );
 
        // This tells jQuery to continue to the next item in the queue
        $( this ).dequeue();
    } );

如上示例，队列函数在动画之后执行。

.queue( function( next ) {
    console.log( "I fired!" );
    next();
} );

自定义队列

$( ".box" )
    .queue( "steps", function( next ) {
        console.log( "Step 1" );
        next();
    } )
    .queue( "steps", function( next ) {
        console.log( "Step 2" );
        next();
    } )
    .dequeue( "steps" );

清除队列

通过 .cleanQueue() .stop(true) 来清除队列。

$( ".box" )
    .queue( "steps", function( next ) {
        console.log( "Will never log because we clear the queue" );
        next();
    } )
    .clearQueue( "steps" )
    .dequeue( "steps" );

替换队列

当传入函数数组，作为 .queue() 的第二个参数，该参数会替换原始队列。

$( ".box" )
    .queue( "steps", function( next ) {
        console.log( "I will never fire as we totally replace the queue" );
        next();
    } )
    .queue( "steps", [
        function( next ) {
            console.log( "I fired!" );
            next();
        }
    ] )
    .dequeue( "steps" );

// 取得队列数组函数
$( ".box" ).queue( "steps", function( next ) {
    console.log( "I fired!" );
    next();
} );
 
console.log( $( ".box" ).queue( "steps" ) );
 
$( ".box" ).dequeue( "steps" );