JQurey动画队列

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个按钮时,动画是同时进行的,但里面的动画是一次进行的

猜你喜欢

转载自blog.csdn.net/qq_39567879/article/details/89333689
0条评论
添加一条新回复