jQuery队列

来源：互联网发布：海外网络通信错误编辑：程序博客网时间：2024/04/28 08:36

jQuery队列使用的方法：

如果要实现一组动画，正常的代码如下：

<html><head><meta charset= utf-8 /><style type= text/css >div {  background:#aaa;  width:50px;  height:50px;  position:absolute;  top:10px;  }  </style><script type= text/javascript  src= jquery-1.10.2__read.js ></script></head><body style= border:1px solid red ><div id="block1"></div><div id="block2"></div></body></html>

    $("#block1").animate({left:"+=100"},function() {  $("#block2").animate({left:"+=100"},function() {  $("#block1").animate({left:"+=100"},function() {  $("#block2").animate({left:"+=100"},function() {  $("#block1").animate({left:"+=100"},function(){  alert("动画结束");  });  });  });  });  });

使用队列的实现方式如下：

    var FUNC=[   function() {$("#block1").animate({left:"+=100"},aniCB);} ,function() {$("#block2").animate({left:"+=100"},aniCB);} ,function() {$("#block1").animate({left:"+=100"},aniCB);} ,function() {$("#block2").animate({left:"+=100"},aniCB);} ,function() {$("#block1").animate({left:"+=100"},aniCB);} //,function(){alert("动画结束")}  ];  var aniCB=function() {  $(document).dequeue("myAnimation");  }  $(document).queue("myAnimation",FUNC);  aniCB();

0 0