jquery动画循环播放

最新推荐文章于 2022-12-15 11:55:09 发布

dragoo1

最新推荐文章于 2022-12-15 11:55:09 发布

阅读量5k

点赞数

分类专栏： jquery 动画 html 文章标签： jquery animate 动画循环 queue

html 同时被 3 个专栏收录

29 篇文章 0 订阅

订阅专栏

jquery

11 篇文章 0 订阅

订阅专栏

动画

3 篇文章 0 订阅

订阅专栏

环境：chrome 43.0.2357.132 m

<!DOCTYPE html>
<html>
<head>
  <style>div { margin:3px; width:40px; height:40px;
        position:absolute; left:0px; top:60px; 
        background:green; display:none; }
  div.newcolor { background:blue; }
  p { color:red; }  </style>

  <script type="text/javascript" src="/jquery/jquery.js"></script>
</head>

<body>

<p>队列长度是：<span></span></p>
<div></div>

<script>
var div = $("div");

function runIt() {
  div.show("slow");
  div.animate({left:'+=200'},2000);
  div.slideToggle(1000);
  div.slideToggle("fast");
  div.animate({left:'-=200'},1500);
  div.hide("slow");
  div.show(1200);
  div.slideUp("normal", runIt);
}

function showIt() {
  var n = div.queue("fx");
  $("span").text( n.length );      
  setTimeout(showIt, 100);
}

runIt();
showIt();
</script>

</body>
</html>

参考：http://www.w3school.com.cn/tiy/t.asp?f=jquery_data_queue

http://www.w3school.com.cn/jquery/data_queue.asp

dragoo1

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
jquery动画循环播放

环境：chrome 43.0.2357.132 m div { margin:3px; width:40px; height:40px; position:absolute; left:0px; top:60px; background:green; display:none; } div.newcolor { background:blue;
复制链接

扫一扫

专栏目录