爲什麼我的jQuery隊列在執行一次後停止工作？

好的，所以我的目標是製作一個簡單的動畫，當一個多米諾骨牌被點擊時，它從一堆的前面移動到後面。爲什麼我的jQuery隊列在執行一次後停止工作？

我有一些作品在這裏：http://jsfiddle.net/Kirkman/tDmHE/

但是，這是由大系列的嵌套回調的，最終我將有超過五張骨牌多了不少。於是我瞭解到jQuery的隊列可以幫助我保持代碼更清潔，而不必嵌套所有這些回調。

這是我想出來的。但它只在第一次點擊時才起作用：http://jsfiddle.net/Kirkman/R7TmU/8/

我無法弄清楚爲什麼它不會在後續工作。

下面是相關的JS功能：

function dominoSlide(theThis) { 
     $('#dominoes .nav ul li').removeClass('selected',500); 
     var thisDomino = theThis.parent(); 
     $('#dominoes .nav ul').queue(function() { 
      thisDomino.switchClass('domino0','selected', 250); 
      $('.domino1').switchClass('domino1','domino0',10); 
      $('.domino2').switchClass('domino2','domino1',10); 
      $('.domino3').switchClass('domino3','domino2',10); 
      $('.domino4').switchClass('domino4','domino3',10); 
      thisDomino.addClass('domino4'); 
      thisDomino.removeClass('selected',250); 
      resetHandlers(); 
     }); 
    } 


    function resetHandlers() { 
     $('#dominoes .nav ul li a').unbind(); 

     $('.domino0 a').bind('click', function(event) { 
      var theThis = $(this); 
      dominoSlide(theThis); 
      event.preventDefault(); 
     }); 

     $('#dominoes .nav ul li:not(".domino0") a').bind('click', function(event) { 
      event.preventDefault(); 
     }); 

    }

來源

2011-09-15 Kirkman14

請註明您需要在問題本身有助於實際的代碼。 –

好的，我添加了它們。 – Kirkman14

你有使用jQuery 1.3的原因嗎？ – PetersenDidIt

<!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"> 
<head> 
    <title></title> 
    <script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script> 
    <script type="text/javascript" src="Scripts/jquery-ui-1.8.16.min.js"></script> 
    <!-- <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>--> 
    <script type="text/javascript"> 

     $(document).ready(function() { 
      var dominoesHtml = $('.nav').clone().html(); 

      $('.story div').hide(); 

      $('.domino0 a').live('click', function (event) { 
       var obj = $(this).parent(); 

       $('#dominoes .nav ul li').removeClass('selected', 500); 
       obj.switchClass('domino0', 'selected', 250); 
       $('.domino1').switchClass('domino1', 'domino0', 10); 
       $('.domino2').switchClass('domino2', 'domino1', 10); 
       $('.domino3').switchClass('domino3', 'domino2', 10); 
       $('.domino4').switchClass('domino4', 'domino3', 10); 
       obj.addClass('domino4'); 
       obj.removeClass('selected', 250); 

       event.preventDefault(); 
      }); 

      $('button#btnReset').click(function() { 
       $('.nav').html(dominoesHtml); 
      }); 
     });  
    </script> 
    <style type="text/css"> 
     body 
     { 
      padding: 10px; 
     } 

     #dominoes 
     { 
      padding: 0px; 
      width: 620px; 
      position: relative; 
      background-color: #eee; 
     } 

     #dominoes .nav ul 
     { 
      list-style: none; 
      margin: 0px; 
      padding: 0px; 
      position: relative; 
     } 

     #dominoes .nav ul li 
     { 
      display: block; 
      position: absolute; 
      width: 113px; 
      top: 0px; 
     } 

     .domino0 
     { 
      left: 0px; 
      z-index: 1000; 
     } 
     .domino1 
     { 
      left: 30px; 
      z-index: 98; 
     } 
     .domino2 
     { 
      left: 60px; 
      z-index: 96; 
     } 
     .domino3 
     { 
      left: 90px; 
      z-index: 94; 
     } 
     .domino4 
     { 
      left: 120px; 
      z-index: 92; 
     } 

     .was0 
     { 
      background-color: red; 
     } 
     .was1 
     { 
      background-color: purple; 
     } 
     .was2 
     { 
      background-color: blue; 
     } 
     .was3 
     { 
      background-color: green; 
     } 
     .was4 
     { 
      background-color: yellow; 
     } 


     #dominoes .nav ul li.hovered 
     { 
      padding-left: 50px; 
     } 


     #dominoes .nav ul li.selected 
     { 
      left: 506px; 
      z-index: 1000; 
     } 

     .story 
     { 
      position: absolute; 
      top: 250px; 
     } 

     button 
     { 
      position: absolute; 
      top: 300px; 
     } 
    </style> 
</head> 
<body> 
    <div id="dominoes"> 
     <div class="nav"> 
      <ul> 
       <li class="domino0 was0"><a href="xxx"> 
        <img src="http://dl.dropbox.com/u/27409695/images/domino.png" />q</a></li> 
       <li class="domino1 was1"><a href="xxx"> 
        <img src="http://dl.dropbox.com/u/27409695/images/domino.png" />q</a></li> 
       <li class="domino2 was2"><a href="xxx"> 
        <img src="http://dl.dropbox.com/u/27409695/images/domino.png" />q</a></li> 
       <li class="domino3 was3"><a href="xxx"> 
        <img src="http://dl.dropbox.com/u/27409695/images/domino.png" />q</a></li> 
       <li class="domino4 was4"><a href="xxx"> 
        <img src="http://dl.dropbox.com/u/27409695/images/domino.png" />q</a></li> 
      </ul> 
     </div> 
     <button id="btnReset"> 
      Reset handlers 
     </button> 
    </div> 
</body> 
</html>

來源

2012-04-24 15:26:41 Thulasiram

現場演示請參閱此鏈接：http://jsfiddle.net/nanoquantumtech/tFgu8/ – Thulasiram

使用jquery 1.7.2版本 – Thulasiram

爲什麼我的jQuery隊列在執行一次後停止工作？

回答

相關問題