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