jQuery之动画animate(animate、stop、finish、delay、queue、clearQueue)

最新推荐文章于 2023-09-22 16:47:39 发布

&XYZ&

最新推荐文章于 2023-09-22 16:47:39 发布

阅读量274

点赞数

分类专栏： jquery

本文链接：https://blog.csdn.net/JEFF_luyiduan/article/details/105308590

版权

jquery 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

文章目录

animate

<!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></title>
  <style>
    .demo {
      width: 0;
      height: 0;
      position: absolute;
      background-color: #ff0000;
    }

    .demo2 {
      width: 0;
      height: 0;
      position: absolute;
      top: 100px;
      background-color: #0000ff;
    }
  </style>
</head>

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

  <div class="demo2"></div>
</body>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
  //animate动画
  $('.demo').animate({ width: '+=50', height: '+=50', top: '+=100', left: '+=100' }, 1000, 'swing', function () {
    console.log('animate')
  })

  //使动画执行两次或者多次
  $('.demo2')
    .animate({ width: '+=50', height: '+=50', top: '+=100', left: '+=100' }, 1000, 'swing', function () { })
    .animate({ width: '+=50', height: '+=50', top: '+=100', left: '+=100' }, 1000, 'swing', function () { })
</script>

</html>

stop、finish、delay

<!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></title>
  <style>
    .demo {
      width: 0;
      height: 0;
      position: absolute;
      background-color: #ff0000;
    }
  </style>
</head>

<body>
  <button id="stopBtn">stop</button>
  <button id="finishBtn">finish</button>
  <button id="startBtn">start</button>
  <div class="demo"></div>
</body>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
  //使动画执行两次或者多次
  //delay(2000):使动画延迟2秒
  $('#startBtn').on('click', function () {
    $('.demo')
      .animate({ width: '+=50', height: '+=50', top: '+=100', left: '+=100' }, 1000, 'swing', function () { })
      .delay(2000)
      .animate({ width: '+=50', height: '+=50', top: '-=200', left: '+=100' }, 1000, 'swing', function () { })
  })

  //使动画停止
  $('#stopBtn').on('click', function () {
    $('.demo').stop()
  })

  //使动画直接完成
  $('#finishBtn').on('click', function () {
    $('.demo').finish()
  })
</script>

</html>

queue 、clearQueue

<!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></title>
  <style>
    .demo {
      width: 0;
      height: 0;
      position: absolute;
      background-color: #ff0000;
    }
  </style>
</head>

<body>
  <div class="demo"></div>
</body>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
  //queue队列方法
  $('.demo')
    .queue('chain', function (next) {
      console.log('over1')
    })
    .queue('chain', function (next) {
      console.log('over2')
    })
    .queue('chain', function (next) {
      console.log('over3')
    })

  console.log($('.demo').queue('chain'))

  //清除队列
  console.log($('.demo').clearQueue('chain'))
  console.log($('.demo').queue('chain'))
</script>

</html>

&XYZ&

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery之动画animate(animate、stop、finish、delay、queue、clearQueue)

文章目录animatestopanimate<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <m...
复制链接

扫一扫