jQuery代碼後window.setTimeout不工作

Question

我有以下元素：

圖塊： allTile hotTile mmyTile

章節： allSec hotSec mmySec

實施例我想要做的事情： 如果allTile被點擊，添加th e類動畫和bounceOut到所有3個部分製作動畫。然後刪除這些類並添加隱藏我來隱藏它們。在全部隱藏之後，通過添加動畫類和bounceIn類來刪除hide-me並反彈它，然後取消隱藏allSec（因爲allTile是選定的圖塊）。

我正面臨的問題： 第一個window.setTimeout後，沒有代碼運行。但是，如果我把它放在控制檯中，它可以正常工作。但是，如果我將整個函數發佈到控制檯中，它將不會在window.setTimeout之後運行代碼。

http://www.jsfiddle.net/met920/zt9eD 還應該有一個CSS鏈接Animate.css從daneden.github.io/animate.css

另外，這裏的相關代碼：

function(){ 
    animationClick('#allTile'); 
    animationClick('#hotTile'); 
    animationClick('#mmyTile'); 

    function animationClick(element){ 
     clickedEl = $(element); 
     element = $(element.substring(0,4) + 'Sec'); 
     clickedEl.click(
      function(){ 
       //bounce out everything 
       $(allSec).addClass('animated bounceOut'); 
       $(hotSec).addClass('animated bounceOut'); 
       $(mmySec).addClass('animated bounceOut'); 

       //wait for animation to finish 
       //before removing classes and hiding them 
       window.setTimeout(function(){ 
        $(allSec).removeClass('animated bounceOut'); 
        $(hotSec).removeClass('animated bounceOut'); 
        $(mmySec).removeClass('animated bounceOut'); 


        $(allSec).addClass('hide-me'); 
        $(hotSec).addClass('hide-me'); 
        $(mmySec).addClass('hide-me'); 
       }, 2000); 

       //bounce in the new one 
       element.removeClass('hide-me'); 
       element.addClass('animated bounceIn'); 
       window.setTimeout(function(){ 
        element.removeClass('animated bounceIn'); 
       }, 2000); 

      } 
     ); 
    }; 
} 

Answer 1

我已經想通了。問題在於setTimeout之後的代碼發生在超時結束之前，因爲我添加和刪除了東西，所以hide-me標籤在添加之前被「刪除」，並在最後保留標籤。

function(){ 
    animationClick('#allTile'); 
    animationClick('#hotTile'); 
    animationClick('#mmyTile'); 

    function animationClick(element){ 
     clickedEl = $(element); 
     element = $(element.substring(0,4) + 'Sec'); 
     clickedEl.click(
      function(){ 
       //bounce out everything 
       $(allSec).addClass('animated bounceOut'); 
       $(hotSec).addClass('animated bounceOut'); 
       $(mmySec).addClass('animated bounceOut'); 

       //wait for animation to finish 
       //before removing classes and hiding them 
       setTimeout(function(){ 
        $(allSec).removeClass('animated bounceOut'); 
        $(hotSec).removeClass('animated bounceOut'); 
        $(mmySec).removeClass('animated bounceOut'); 


        $(allSec).addClass('hide-me'); 
        $(hotSec).addClass('hide-me'); 
        $(mmySec).addClass('hide-me'); 


        element.removeClass('hide-me'); 
        element.addClass('animated bounceIn'); 
        setTimeout(function(){ 
         element.removeClass('animated bounceIn'); 
        }, 2000); 
       }, 1000); 
      } 
     ); 
    }; 
} 

Answer 2

試試這個它的工作：

function(){ 
    animationClick('#allTile'); 
    animationClick('#hotTile'); 
    animationClick('#mmyTile'); 

    function animationClick(element){ 
     clickedEl = $(element); 
     element = $(element.substring(0,4) + 'Sec'); 
     clickedEl.click(
      function(){ 
       //bounce out everything 
       $(allSec).addClass('animated bounceOut'); 
       $(hotSec).addClass('animated bounceOut'); 
       $(mmySec).addClass('animated bounceOut'); 

       //wait for animation to finish 
       //before removing classes and hiding them 
       setTimeout(function(){ 
        $(allSec).removeClass('animated bounceOut'); 
        $(hotSec).removeClass('animated bounceOut'); 
        $(mmySec).removeClass('animated bounceOut'); 


        $(allSec).addClass('hide-me'); 
        $(hotSec).addClass('hide-me'); 
        $(mmySec).addClass('hide-me'); 
       }, 2000); 

       //bounce in the new one 
       element.removeClass('hide-me'); 
       element.addClass('animated bounceIn'); 
       setTimeout(function(){ 
        element.removeClass('animated bounceIn'); 
       }, 2000); 

      } 
     ); 
    }; 
}