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 - 如何編寫自定義隊列？

回答

相關問題