动画效果详细事件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" );