JQurey动画队列
JQuery有一个类似于任务对列的一个概念，但是不同的是当我绑定给2个元素事件的时候，2个元素之间的动画队列是分开的。而任务队列只是单线程进行。这里我做了一个小测试代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div{
background: red;
display: inline-block;
width: 200px;
height: 200px;
position: absolute;
top:50px;
left:0
}
span{
margin-left:300px;
position: absolute;
}
</style>
</head>
<body>
<button>show</button>
<button>hide</button>
<button>slideUp</button>
<button>slideDown</button>
<button>slideToggle</button>
<button>fadein</button>
<button>fadeuot</button>
<button>animate</button>
<button>clearQue</button>
<button>auto</button>
<button>finish</button>
<div></div>
<span>haha</span>
</body>
<script src="https://code.jquery.com/jquery-3.4.0.min.js"></script>
<script>
$('button').eq('0').on('click',function(){
$('div').show(1000,'linear',function(){
console.log('haha')
})
})
$('button').eq('1').on('click',function(){
$('div').hide('fast')
})
$('button').eq('2').on('click',function(){
$('div').slideUp('')
})
$('button').eq('3').on('click',function(){
$('div').slideDown(500,'')
})
$('button').eq('4').on('click',function(){
$('div').slideToggle(500,'')
})
$('button').eq('5').on('click',function(){
$('div').fadeIn('slow')
})
$('button').eq('6').on('click',function(){
$('div').fadeOut('slow')
})
$('button').eq('7').on('click',function(){
$('div').animate({
left:'-=50',
top:'+=50',
})
})
$('button').eq('8').on('click',function(){
$('div').clearQueue()
})
$('button').eq('9').on('click',function(){
$('span').animate({
left:'+=100',
top:'-=100'
},500).slideUp('').slideDown()
.animate({
top:'+=200'
})
.animate({
top:'+=400'
})
.animate({
left:'+=100'
})
})
$('button').eq('10').on('click',function(){
$('div').animate({
left:'+=100',
top:'-=100'
},500).slideUp('').slideDown()
.animate({
top:'+=200'
})
.animate({
top:'+=400'
})
.animate({
left:'+=100'
})
})
</script>
</html>
我点击2个按钮时，动画是同时进行的，但里面的动画是一次进行的