jQuery 效果

jQuery

效果简介

显示和隐藏内容

jQuery 中可以直接使用.hide()方法和.show()方法来显示和隐藏内容。

$( "p" ).hide();
$( "div.hidden" ).show("fast");

用这个方式在显示和隐藏内容本质上是修改其 display 样式。向这两个方法中传入"slow"、"normal"或者"fast"可以使用动画效果来显示和隐藏内容。也可以直接向其中传入毫秒数来设定时间，在这段时间中元素的 weight 和height 属性会不断缩小或变大。

淡出和滑动动画

使用.slideUp()方法和.slideDown()方法可以创建滑动动画，滑动动画将会改变元素的 height 样式。相似的，.fadeOut()和.fadeIn()方法可以改变元素的 opacity 样式来达到淡入淡出的效果。

根据当前元素的可见性改变 display

.toggle()方法，在当前元素可见的时候隐藏该元素，在当前元素不可见时显示该元素。.slideToggle()方法以 slide 的方式切换.fadeToogle()以 fade 的方式切换。

动画完成后执行

$( "p.hidden" ).fadeIn( 750 ).addClass( "lookAtMe" );

在动画的链式调用中，并不会等到动画执行完毕再执行下一个的方法，而是在执行下一个方法的同时异步执行动画。如果需要延迟下一个方法的执行，可以使用动画回调函数，将需要延迟执行的函数作为第二个参数传入.fadeIn()方法。

$( "p.hidden" ).fadeIn( 750, function() {
    $( this ).addClass( "lookAtMe" );
});

管理动画效果

.stop()

.stop()方法可停止元素正在执行的一切动画。

.delay()

.delay()方法用于在两个连续的动画之间插入一个延迟。

//在0.5s 之内隐藏，然后等待1.5s 再执行.show()
$( "h1" ).hide( 500 ).delay( 1500 ).show( 300 );

jQuery.fx

jQuery.fx 对象拥有一系列控制正在执行的动画的属性。

jQuery.fx.speed 可以设置 fast、slow 和normal 的持续时间。以下是这个对象的内容。

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

jQuery.fx.interval 控制动画中相邻两帧之间的间隔时间，默认值是13，即13ms 一帧。间隔时间越短，动画的效果越平滑，也越消耗资源。

jQuery.fx.off 设置为 ture 可以禁用所有动画。

.animate()的用户效果

.animate()方法可以对任意 CSS 属性制作动画。既可以为 CSS 属性设定一个值，也可以相对于目前值来设置。

$( "div.funtimes" ).animate(
    {
        left: "+=50",
        opacity: [ 0.25, "linear" ]
    },
    // 持续时间
    300,
    // 执行完毕后的回调函数
    function() {
        console.log( "done!" );
    }
);

可以在值后面接上过渡方式来控制动画的速度曲线，jQuery 仅支持两个过渡方式，"swing"摇摆和"linear"匀速。
另外，与颜色相关的动画不能够通过.animate()方法来实现。

入队和离队

队列是 jQuery 中所有动画的基础，它允许一系列函数在同一个元素上异步执行。上面所提到的动画方法都是通过队列来在动画的整个持续时间内转换一个或者多个 CSS 属性值。

队列作为回调函数

通过.queue()方法也可以定义回调函数。

$( ".box" )
    .animate( {
        height: 20
    }, "slow")
    .queue( function() {
        $( "#title" ).html( "We're in the animation, baby!" );
        // 继续执行队列的中的下一个任务
        $( this ).dequeue();
    } );

jQuery 不知道何时执行队列中的函数，因此我们需要手动调用.dequeue()方法来移动到队列中的下一个函数。

另一个移动到下一个函数的方法就是调用被传入到回调函数中的函数，jQuery 会自动调用.dequeue()方法。

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

用户队列

直到这一点的所有动画和队列的例子的队列名都是默认的 fx。元素上可以拥有多个队列，因此我们可以给每个队列不同的名字。我们可以在.queue()方法的第一个参数定义队列的名字。

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

除了默认的队列，所有队列都需要通过向.dequeue()方法中传入队列名的方式手动启动。

清除队列

.clearQueue()方法清除当前队列。

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

在以上的例子中什么也不会发生，因为我们清除了整个队列。

另一个清除队列的方法是.stop( true )。

替换队列

当向.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" );

调用.queue()方法时不传入参数会返回一个以数组形式表示的队列。