显示和隐藏元素

1，无过渡(show，hide，toggle)

// show()
// hide()
var $body = $(this).siblings('.body');
if ($body.is(':hidden')) {
    $body.show();
} else {
    $body.hide();
}

// toggle()
// 效果和上面是一样的
$(this).siblings('.body').toggle()

2，有过渡(show，hide，toggle)

// show(duration[,easing][,callback])
// hide(duration[,easing][,callback])
// toggle(duration[,easing][,callback])
// 原理：通过改变元素尺寸，透明度实现动画，比较复杂

// duration(过渡的时间，单位ms)：数值 / fast(200ms) / normal(400ms) / slow(600ms)
// easing(切换效果)：swing(慢快慢，默认) / linear(线性)

$(this).siblings('.body').toggle('fast');
$(this).siblings('.body').toggle('slow', 'linear');
$(this).siblings('.body').toggle('slow', function () {
    console.log('动画完成');
});

3，有过渡(fadeIn，fadeOut，fadeToggle，fadeTo)

// fadeIn(duration[,easing][,callback])
// fadeOut(duration[,easing][,callback])
// fadeToggle(duration[,easing][,callback])
// 原理：通过改变透明度实现动画

$(this).siblings('.body').fadeToggle('slow', function () {
    console.log('动画完成');
})

// fadeTo(duration,opacity[,easing][,callback])
// 原理：通过改变透明度实现动画
// opacity(最终的不透明度)：0(完全透明) - 1(不透明)

$(this).siblings('.body').fadeTo('slow', 0.5, function () {
    console.log('动画完成');
})

4，有过渡(slideDown，slideUp，slideToggle)

// slideDown(duration[,easing][,callback])
// slideUp(duration[,easing][,callback])
// slideToggle(duration[,easing][,callback])
// 原理：通过改变尺寸实现动画

$(this).siblings('.body').slideToggle(1000, function () {
    console.log('动画完成');
})

5，停止动画(stop，finish，jQuery.fx.off)

// stop([clearQueue [,goToEnd]])
// clearQueue：true(不光立即停止现在的动画，在队列中正在等待的动画也会立即停止) / false(立即停止现在的动画)
// goToEnd：true(立即完成当前动画) / false
$('.body').stop(true, false);

// finish([queue])
// 直接到达指定元素动画完成的状态
$('.body').finish()

// finish() 与 stop(true,true)的区别
// finish()：所有的堆栈动画，直接达到动画完成的状态
// stop(true,true)：所有的动画直接停止，且当前动画达到完成的状态

// 全局开关，全局改变动画效果
jQuery.fx.off = true;  // 无动画效果

动画过渡效果Easing插件

下载插件

GitHub => release => 选择最新版本 => Source code(zip)下载
Easing插件官网

引入插件

直接引入即可：<script src="../../../vendor/jquery.easing.js"></script>
注意引入的时候要放在jquery引入的后面，否则会报错

使用插件

$(this).siblings('.body').slideToggle(1000,'easeInBack')
// 只需要把第二个参数[easing]改成相应的类型即可
// easeInBack可以在Easing官网中找到

自定义动画

可以自定义动画的css属性有：

• top，left ......等位置属性
• width，height ......等尺寸属性
• margin，padding，border等边距属性
• font-size等字体属性
• opacity等透明度属性

animate(properties[[,duration][,easing]][,callback])

// animate(properties[[,duration][,easing]][,callback])
// properties：是一个对象，包含一些css属性的值，是动画的最终效果

$(this).siblings('.body').animate({
    // width: 400,
    // height: 500,

    // width: '-=100',  // 这种运算的方式也是可以的
    // height: '+=200', // 这种运算的方式也是可以的

    width: '50%',    // 这种百分比的方式也可以的
}, 3000, function () {
    console.log('动画结束');
})

animate(properties[,options])

// animate(properties[,options])
// [options]
// 粒度更细

// start:       动画开始的时候触发
// step:        有一个css样式发生变化，就会触发。这里动画执行一步会改变两个css样式，所以step每次会触发两次
// progress:    动画每执行一次就会触发一次
// complete:    动画完成的时候执行
// always:      不管动画最终完成还是失败，最后都会触发

// done:        动画完成的时候执行，与complete类似
// fial:        动画失败的时候触发

// queue:       动画是否保存在队列中，false：不保存(立即执行动画), true(保存)：依次执行动画

$(this).siblings('.body').animate({
    width: 200,
    height: 500
}, {
    always: function () {
        console.log('always');
    },
    complete: function () {
        console.log('complete');
    },
    step: function () {
        console.log('step');
    },
    progress: function () {
        console.log('progress');
    },
    start: function () {
        console.log('start');
    },
    duration: 3000,
    easing: 'linear'
})

知识点：options并不是只有animate才有，以上提到的show，hide，toggle都有这个属性。

动画队列

• 队列机制：适用于按次序执行的函数，而不仅仅是动画
• jQuery中的动画是异步的
• 动画不会阻塞进程
• 动画放在异步队列中，依次执行

queue([name],function)：定义队列

// queue([name],function)       // 定义队列

$('#box1').queue('chain', function () {
    console.log('第1次');
}).queue('chain', function () {
    console.log('第2次');
}).queue('chain', function () {
    console.log('第3次');
}).queue('chain', function () {
    console.log('第4次');
})

$('#box1').queue('chain', function (next) {
    console.log('第1次');
    next(); // 自动执行下一个任务
}).queue('chain', function (next) {
    console.log('第2次');
    next(); // 自动执行下一个任务
}).queue('chain', function (next) {
    console.log('第3次');
    next(); // 自动执行下一个任务
}).queue('chain', function (next) {
    console.log('第4次');
})

dequeue([name])：执行队列

// dequeue([name])              // 执行队列

$('#box1').click(function () {
    var $this = $(this);
    $this.dequeue('chain');  // chain是已经定义好的队列
}

clearqueue([name])：清除队列

// clearqueue([name])           // 清除队列

$('#box1').click(function () {
    var $this = $(this);
    $this.clearQueue('chain');  // chain是已经定义好的队列
}

delay(duration[,queueName])：延迟队列

// delay(duration[,queueName])  // 延迟队列

$('#box1').queue('chain', function (next) {
    $(this).animate({ left: '+=50' }, 'slow');
    next();
}).queue('chain', function (next) {
    $(this).animate({ top: '+=50' }, 'slow');
    next();
}).queue('chain', function (next) {
    $(this)
        .delay(1000)  // 如果没有第二个参数，那么就是延迟当前队列
        .animate({ left: '+=50', top: '+=50' }, 'slow');
    next();
}).queue('chain', function (next) {
    $(this).animate({ opacity: 0.2 }, 'slow');
    next();
})

jQuery会把动画加入到fx队列中

// 以下这种方式，是可以第三个动画插入进去的
// 第一个动画
$this.animate({
    left: '+=50'
}, 'slow');
// 第二个动画
$this.animate({
    top: '+=50'
}, 'slow');
// 第三个动画
$this.queue('fx', function () {
    $(this)
        .css({
            backgroundColor: '#999'
        })
        .dequeue('fx');  // 注意这里要执行动画fx，否则不会继续下去
});
// 第四个动画
$this.animate({
    left: '+=50'
}, 'slow');