jQuery实例方法 — 动画

动画相关方法

hide()隐藏、show()展示、toggle()

// 移入p标签ul显示，移出整体时隐藏ul
<style>
.demo{
    width: 100px;
    border: 1px solid black;
}
ul{
    display: none;
}
</style>

<div class="demo">
    <p>Rose</p>
    <ul>
        <li>li-1</li>
        <li>li-2</li>
        <li>li-3</li>
    </ul>
</div>

// 由hide转为show时，你没有设置display属性时它会给你添加默认的，这个就会给ul添加block属性，添加了属性时按照你添加的来，且它们会把透明度宽高等一起变化
$('p').on('mouseenter', function () {
    $(this).next().show(3000, 'swing');   // 利用3秒将这个ul显示出来，第二个参数是你以什么运动方式显示出来，swing先慢再快再慢
});
$('.demo').on('mouseleave', function () {
    $('ul').hide(3000, 'linear');   // 利用3秒将这个ul隐藏起来,第二个参数是你以什么运动方式隐藏，linear匀速
});

// togglle
$('p').on('click', function () {
	$(this).next().toggle();  // 点一次显示再点一次隐藏
});

fadeIn()淡入、fadeOut()淡出、fadetoggle()、fadeto()
与上面三个的区别在于，它们只专注透明度

hide、show、toggle、fadeIn、fadeOut、fadetoggle这六个可以添加三个参数，第一个参数填时间，第二个添运动方式，第三个添函数（回调函数，到达最后状态时调用）。fadeto可添加四个参数，第一个时间，第二个添指定到达的透明度，类推后面两个

slideDown()卷入、slideUp()卷出、slidetoggle()
主要关注宽高，用法参数与上面差不多

*animate()
四个参数：target、duration、easing、callback

<style>
.demo{
    position: absolute;
    width: 100px;
    height: 100px;
    background-color: orange;
}
</style>
<button id="stopBtn">stop</button>
<button id="finishBtn">finish</button>
<button id="startBtn">start</button>
<div class="demo"></div>

// 花1秒时间用swing运动方式从原位置原大小到指定位置指定大小，执行完后打印出over
$('.demo').animate({width:'+=50', height:'+=50', left:'+=50', top:'+=50'}, 1000, 'swing', function () {
    console.log('over');
});

stop()、finish()、delay()
配合animate使用

$('#startBtn').on('click', function () {
    $('.demo')
        .animate({width:'+=50', height:'+=50', left:'+=150', top:'+=150'}, 2000, 'swing')
        .animate({width:'+=50', height:'+=50', left:'+=150', top:'-=150'}, 2000, 'swing');
});
// stop
$('#stopBtn').on('click', function () {
	// stop无参数即为null时跳过第一个运动直接进行下面的运动，一个参数时停止后面所有运动，两个参数时停止当前运动并且瞬间移动到当前运动的目标点
    $('.demo').stop(true, true);
});
// finish
$('#finishBtn').on('click', function () {
	// 没有参数，直接到达最后一个运动的目标点
    $('.demo').finish();
});
// delay
$('#startBtn').on('click', function () {
    $('.demo')
        .animate({width:'+=50', height:'+=50', left:'+=150', top:'+=150'}, 2000, 'swing')
        	.delay(2000)  // 在上一个动画结束后延迟2秒运动下一个动画
        		.animate({width:'+=50', height:'+=50', left:'+=150', top:'-=150'}, 2000, 'swing');
});

jQuery.fx.off = true
执行这个后把所有动画机制都取消了，直接到达目标点

animate中的queue（队列）

// 一个一个取出
$('.demo').queue('chain', function () {
    console.log('over1');
}).queue('chain', function () {
    console.log('over2');
}).queue('chain', function () {
    console.log('over3');
});
// dequeue出列
console.log($('.demo').queue('chain'));  // [f,f,f]
$('.demo').dequeue('chain');             // 'over1'
console.log($('.demo').queue('chain'));  // [f,f]
$('.demo').dequeue('chain');             // 'over2'
console.log($('.demo').queue('chain'));  // [f]
$('.demo').dequeue('chain');             // 'over3'
console.log($('.demo').queue('chain'));  // []
// 一次取完
$('.demo').queue('chain', function (next) {
    console.log('over1');
    next();
}).queue('chain', function (next) {
    console.log('over2');
    next();
}).queue('chain', function (next) {
    console.log('over3');
});
console.log($('.demo').queue('chain'));  // [f,f,f]
$('.demo').dequeue('chain');             // 'over1'  'over2'  'over3'
console.log($('.demo').queue('chain'));  // []

// clearQueue 清空队列
$('.demo').clearQueue('chain');

动画队列实例

<style>
.demo{
    position: absolute;
    width: 100px;
    height: 100px;
    background-color: orange;
}
</style>

<div class="demo"></div>

$('.demo').on('click', function () {
    $(this).dequeue('chain');
}).queue('chain', function (next) {
    $(this).animate({width:100, height:100, left:100, top:100});
    next();
}).queue('chain', function (next) {
    $(this).animate({width:200, height:200, left:200, top:200});
    next();
}).queue('chain', function (next) {
    $(this).animate({width:300, height:300, left:300, top:300});
});