jQueryキューは一度実行しても機能しなくなるのはなぜですか？

私の目標は、クリックしたときにドミノが杭の前から後ろに移動する簡単なアニメーションを作成することです。jQueryキューは一度実行しても機能しなくなるのはなぜですか？

私はここで働く何かを持っている：http://jsfiddle.net/Kirkman/tDmHE/

をしかし、これは、ネストされたコールバックの大きなシリーズで構成され、最終的に私は5個のドミノよりも多くなります。だから私は、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キューは一度実行しても機能しなくなるのはなぜですか？

答えて

関連する問題