【jQuery】jQuery官方基本教程的学习笔记3-动画效果Effects

动画效果详细事件api：http://api.jquery.com/category/effects/

一、Introduction to Effects---介绍动画效果

1.showing and Hiding Content（显示和隐藏效果）

1）.show()和.hide()方法

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

2）.可以传入三个参数控制快慢'slow','normal','fast'

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

3）.可以传入数值毫秒值

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

2.Fad and Slide Animations --褪色和滑动效果

1）.slideUp() ,.slideDown()

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

2).fadeIn() 和.fadeOut()

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

3.Changing Display Based on Current Visibility State --根据当前状态改变显示情况

1）.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 );

4.Doing Something After an Animation Completes在动画完成后添加样式

使用选择器后的元素添加动画时，先确认是否选择了元素

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

5.Managing Animation Effects管理动画效果

1）.stop()

立即停止动画效果

2）.delay()

延迟呈现动画效果，参数为毫秒

$( "h1" ).hide( 500 ).delay( 1500 ).show( 300 );

3）jQuery.fx

改变"slow","normal","fast"参数的值

jquery默认为：

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

通过下面方式改变或添加自定义的maps，然后在后面的代码中使用即可：

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

4）jQuery.fx.off

改变所有动画效果。 true/false,对就浏览器

二、Custom Effects with .animate() 使用.animate()方法自定义动画效果

1.animate()方法

通过改变css属性实现

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

注意：不能通过.animate()改变颜色相关属性的动画，后面使用插件很容易来实现

2.Easingy 

不知道咋翻译，姑且叫异形

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

三、Quene 和 Dequene Explained 出栈和进栈阐述

1.我们可以定义回调函数，来执行动画后进行回调

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

2.把Quenes当作回调

$( ".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();
    } );

3.自定义队列

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

4.清除队列

$( ".box" )
    .queue( "steps", function( next ) {
        console.log( "Will never log because we clear the queue" );
        next();
    } )
    .clearQueue( "steps" ) // 也可以调用.stop(true)
    .dequeue( "steps" );

5.替换队列 用数组

$( ".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" );