完整文档: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" );