jquery动画顺序执行_jQuery 动画的执行

$(function() {

$('#btn001').click(btn001Click);

$('#btn002').click(btn002Click);

$('#btn003').click(btn003Click);

$('#btn004').click(btn004Click);

$('#btn005').click(btn005Click);

$('#btn006').click(btn006Click);

$('#btn007').click(btn007Click);

$('#btn008').click(btn008Click);

$('#btn009').click(btn009Click);

$('#btn010').click(btn010Click);

$('#btn011').click(btn011Click);

$('#btn012').click(btn012Click);

$('#btn013').click(btn013Click);

$('#btn014').click(btn014Click);

$('#btn015').click(btn015Click);

$('#btn016').click(btn016Click);

$('#btn017').click(btn017Click);

});functionbtn001Click(e) {//在div001已经隐藏的情况下，不会有动画显示，但是会立刻执行动画完成函数；

$('#div001').hide('slow', function() {

console.log('div001 hide slow');

});

}functionbtn002Click(e) {//在div001已经显示的情况下，不会有动画显示，但是会立刻执行动画完成函数；

//div001的宽、高、透明度都进行逐渐变化；

$('#div001').show('slow', function() {

console.log('div001 show slow');

});

}functionbtn003Click(e) {//在div001已经显示的情况下，不会有动画显示，但是会立刻执行动画完成函数；

//div001的宽、高都是一下子变成正常值，然后只有透明度从0逐渐变为正常值；

$('#div001').fadeIn('slow', function() {

console.log('div001 fadeIn slow');

});

}functionbtn004Click(e) {//在div001已经不显示的情况下，不会有动画显示，但是会立刻执行动画完成函数；

//div001的透明度从正常值逐渐变为0，然后宽、高一下子变成0；

$('#div001').fadeOut('slow', function() {

console.log('div001 fadeOut slow');

});

}functionbtn005Click(e) {//高度从上到下逐渐增加，逐渐显示某个元素；

$('#div001').slideDown('slow', function() {

console.log('div001 slideDown slow');

});

}functionbtn006Click(e) {//高度从下到上逐渐减小，逐渐隐藏某个元素；

$('#div001').slideUp('slow', function() {

console.log('div001 slideUp slow');

});

}//对div001依次执行动画效果；

functionbtn007Click(e) {

$('#div001').animate({

left :'50px' //div001的position必须是relative/absolute才可以产生变化；

}, 3000, function() {

console.log('div001 animate left 50px slow');

}).animate({

height :'200px'},'slow', function() {

console.log('div001 animate height 200px slow');

}).animate({

left :'+60px' //这个相对于只往右侧移动了10px，都是相对于最开始的位置的；

}, 'slow', function() {

console.log('div001 animate left +60px slow');

}).animate({

left :'+=60px' //这个相对于又往右侧移动了60px，相对于当前的位置；

}, 'slow', function() {

console.log('div001 animate left +=60px slow');

});

}//同步执行的动画；

functionbtn008Click(e) {

$('#div001').animate({

left :'50px',

height :'200px'},'slow', function() {

console.log('div001 animate left, height');

}).fadeOut('slow');//自定义动画可以附加上系统自带的动画效果；

}functionbtn009Click(e) {

$('#div001').animate({

left :'50px',

height :'200px'},'slow', function() {

console.log('div001 animate left, height');

}).css('border', '5px solid blue');//这样的css函数会在动画开始的时候立即执行；如果希望在动画执行完毕之后执行，需要使用回调函数；

}functionbtn010Click(e) {

$('#div001').animate({

left :'50px',

height :'200px'},5000, function() {

console.log('div001 animate left, height');

$(this).css('border', '5px solid blue');//这样css函数会在动画执行完毕之后执行；

});

}functionbtn011Click(e) {//立刻暂停当前的动画，不会执行当前动画的回调函数，但是会继续执行动画队列中的下一个动画；

//$('#div001').stop();

//立刻暂停当前的动画，并且清空了动画队列中的所有动画；不会执行任何动画的回调函数；

//$('#div001').stop(true);

//当前动画立即完成，调用当前动画的回调函数，清空动画队列中的所有动画；

$('#div001').stop(true, true);

}functionbtn012Click(e) {//这样的动画会有问题，如果鼠标快速移出的话，div001会把第一个动画执行完毕，再执行第二个动画；

$('#div001').hover(function() {

$(this).animate({

height :'150',

width :'300'},'slow');

},function() {

$(this).animate({

height :'22',

width :'60'},'slow')

});

}functionbtn013Click(e) {

$('#div001').hover(function() {

$(this).stop().animate({//增加了stop会把之前在执行的动画停止；

height : '150',

width :'300'},'slow');

},function() {

$(this).stop().animate({

height :'22',

width :'60'},'slow')

});

}functionbtn014Click(e) {

$('#div001').hover(function() {

$(this).stop().animate({//如果不增加stop(true)，只能停止当前的动画，下一个动画队列还是会执行的；

height : '150'},'slow').animate({

width :'300'},'slow');

},function() {

$(this).stop().animate({

height :'22'},'slow').animate({

width :'60'},'slow');

});

}functionbtn015Click(e) {

$('#div001').hover(function() {

$(this).stop(true).animate({//增加了stop(true),可以把没有执行的动画队列清空；

height : '150'},'slow').animate({

width :'300'},'slow');

},function() {

$(this).stop(true).animate({

height :'22'},'slow').animate({

width :'60'},'slow');

});

}functionbtn016Click(e) {//这样会直接返回true，不能返回移动的对象；

var obj = $('div').is(':animated');

console.log(obj);//这样可以得到正在移动的对象；

var obj2=$('div:animated');

console.log(obj2);

}functionbtn017Click(e) {//延迟一下动画的执行；

$('#div001').slideUp(1000).delay(1000).slideDown(1000);

}