jQuery - 如何编写自定义队列？

我想让自定义队列，你能告诉我我做错了什么吗？jQuery - 如何编写自定义队列？

这里是行动代码： http://dl.dropbox.com/u/1292831/hell/index2.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
<link rel="stylesheet" href="style/style.css" type="text/css" /> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script> 

<style type="text/css"> 
    .tester { 
     background:red; 
     width: 100px; 
     height: 100px; 
     left: 900px; 
     top: 300px; 
     position: absolute; 
    } 

    .counter { 
     position: absolute; 
     left: 0; 
     top: 0; 
     width: 150px; 
     font-size: 18px; 
    } 
</style> 

<script type="text/javascript"> 

    $(function(){ 

      // animation for the 'FX' queue: 
     $('.tester').fadeOut(1000).fadeIn(1000) 


      // animation for the 'lolo' queue: 
     $('.tester').queue('lolo',function(next){ 
      $(this).animate({left: 100}, {duration:1000}) 
      next() 
      }) 

    $('.tester').queue('lolo',function(next){ 
      $(this).animate({left: 800}, {duration:1000}) 
      next() 
      }) 
      .dequeue('lolo') 
    }) 


    // counters 
    setInterval(function(){ 
     var count = $('.tester').queue('fx').length 
     $('.counter #c1').html(count) 

     var count = $('.tester').queue('lolo').length 
     $('.counter #c2').html(count) 

    }, 250) 

</script> 


</head> 
<body> 

<p class="counter"> 
    items in the 'fx' queue <span id="c1"></span> <br /> 
    items in the 'lolo' queue <span id="c2"></span> 
</p> 

<div class="tester"></div> 

</body> 
</html>

来源

2011-05-10 Asaf Katz

编辑：在jQuery 1.7，animate确实需要一个选项来指定自定义队列的动画添加到。

这不是完全清楚这里的问题是，但我认为从看的例子，你希望在队列内的动画是在不同的队列中。

这是问题所在。 Animate总是在fx队列中。我不知道有什么方法将它放在另一个队列中。所以，你在自定义队列中总是看到0的原因是你排队的东西会立即完成。他们只需调用动画（将动画放在fx队列中）并完成。这也是为什么你最初在FX队列中看到4个。

解决此问题的一个方法是，在您的自定义队列中运行动画queue:false，然后自行处理该队列中的延迟。例如：

http://jsfiddle.net/jRawX/6/

$(function(){ 

     // animation for the 'FX' queue: 
    $('.tester').fadeOut(1000).fadeIn(1000) 


     // animation for the 'lolo' queue: 
    $('.tester') 
     .queue('lolo',function(next){ 
      $(this).animate({left: 100}, {duration:1000, queue:false, complete: next}) 
     }) 
     .queue('lolo',function(next){ 
      $(this).animate({left: 600}, {duration:1000, queue:false, complete: next}) 
     }) 
     .dequeue('lolo') 
}) 


// counters 
setInterval(function(){ 
    var count = $('.tester').queue('fx').length 
    $('.counter #c1').html(count) 

    var count = $('.tester').queue('lolo').length 
    $('.counter #c2').html(count) 

}, 250)

可能有更好的方法来做到这一点，我只是做这一个。但我无法找到任何方式在另一个队列上进行动画制作。

编辑：略有改进，调用next动画回调。

来源

2011-05-11 02:50:19

谢谢，它的作品就像一个魅力！对于我目前的项目来说，它已经足够了。仍然希望找到一种方法来做类似.animate（'lolo'，{left：100}，1000）... – 2011-05-11 20:42:12

jQuery - 如何编写自定义队列？

回答

相关问题