延遲動畫，直到其他動畫完成（滑動內容（

Question

）我有這個代碼在動畫之間divs滑出。如果一個項目被點擊，它的相關內容滑出如果另一個項目被點擊，當前內容滑回和新內容滑出

然而，

var lastClicked = null; 
var animateClasses = ['ale', 'bramling', 'bullet', 'miami-weisse']; 
    for (var i=0; i<animateClasses.length; i++) { 
     (function(animCls) { 
     $('.each-brew.'+animCls).toggle(function() { 
    if (lastClicked && lastClicked != this) { 
     // animate it back 
     $(lastClicked).trigger('click'); 
    } 
    lastClicked = this; 
    $('.each-brew-content.'+animCls).show().animate({ left: '0' }, 1000).css('position','inherit'); 
     }, function() { 
      $('.each-brew-content.'+animCls) 
        .animate({ left: '-33.3333%' }, 1000, function() { $(this).hide()}) // hide the element in the animation on-complete callback 
        .css('position','relative'); 
     }); 
     })(animateClasses[i]); // self calling anonymous function 
    } 

然而，內容滑出一旦已開放內容向後滑動過快滑出 - 它需要等到內容已經完全滑動回在它滑出之前這是可能的嗎？

下面是我目前正在努力獲得想法的鏈接（http://goo.gl/s8Tl6）。

乾杯提前， [R

Answer 1

這是我的承擔作爲一個直接替換沒有標記的變化。你想要的三種情況之一發生的菜單項被點擊時：

1. 如果單擊項目目前呈現，隱藏
2. 如果別的東西是顯示，隱藏它，則顯示當前項目的內容
3. 如果不顯示，顯示當前項目的內容

---

var lastClicked = null; 
// here lastClicked points to the currently visible content 
var animateClasses = ['ale', 'bramling', 'bullet', 'miami-weisse']; 
    for (var i=0; i<animateClasses.length; i++) { 
     (function(animCls) { 
      $('.each-brew.'+animCls).click(function(event){ 
       if(lastClicked && lastClicked == animCls){ 
        // if the lastClicked is `this` then just hide the content 
        $('.each-brew-content.'+animCls).animate(
              { left: '-33.3333%' }, 1000, 
              function() { 
               $(this).hide(); 
              }).css('position','relative'); 
        lastClicked = null; 
       }else{ 
        if(lastClicked){ 
         // if something else is lastClicked, hide it, 
         //then trigger a click on the new target 
         $('.each-brew-content.'+lastClicked).animate(
              { left: '-33.3333%' }, 1000, 
              function() { 
               $(this).hide(); 
               $(event.target).trigger('click'); 
              }).css('position','relative'); 
         lastClicked = null; 
        }else{ 
         // if there is no currently visible div, 
         // show our content 
         $('.each-brew-content.'+animCls).show() 
             .animate({ left: '0' }, 1000) 
             .css('position','relative'); 
        lastClicked = animCls; 
        } 
       } 
      }); 
     })(animateClasses[i]); // self calling anonymous function 
    } 

Answer 2

嗯，我敢肯定還有其他更容易的可能性，我沒有太多的時間，但在這裏是一個工作的jsfiddle：http://jsfiddle.net/uaNKz/

Basicly使用callback函數等待動畫完成。在這種特殊情況下它是complete: function(){...}

$("document").ready(function(){ 
    $('#ale').click(function(){ 
     if ($('div').hasClass('toggled')){ 
      $('.toggled').animate({ width: "toggle" }, { duration:250, complete: function(){ 
      $('#alecont').animate({ width: "toggle" }, { duration:250 }).addClass('toggled');} 
      }).removeClass('toggled'); 
     }else{ 
      $('#alecont').animate({ width: "toggle" }, { duration:250 }).addClass('toggled'); 
     } 
    }); 
    $('#bramling').click(function(){ 
    if ($('div').hasClass('toggled')){ 
     $('.toggled').animate({ width: "toggle" }, { duration:250, complete: function(){ 
     $('#bramcont').animate({ width: "toggle" }, { duration:250 }).addClass('toggled');} 
     }).removeClass('toggled'); 
    }else{ 
     $('#bramcont').animate({ width: "toggle" }, { duration:250 }).addClass('toggled'); 
    } 
    }); 
}); 

我給toggled類，如果一個div擴大。由於您的網頁上的動畫似乎已經非常糟糕，我認爲這將是更好的方式。但請記住：我的代碼不太好。只要快，它可以重構。它正在工作..

Answer 3

而不是使用切換，綁定一個「點擊」處理程序到您的「.each-brew」div。在處理程序中，首先隱藏內容div，然後在動畫完成時顯示適當的內容。你可以用承諾或回調做到這一點。像這樣的東西...

$(".each-brew").on("click", function (event) { 
     $(".each-brew-content").show().animate({ left: "0" }, 1000, function() { 
      // Get the brew name from the class list. 
      // This assumes that the brew is the second class in the list, as in your markup. 
      var brew = event.currentTarget.className.split(/\s+/)[1]; 
      $(".each-brew-content." + brew).animate({ left: "-33.3333%" }, 1000, function() { $(this).hide(); }); 
     }); 
    }); 

Answer 4

我認爲一個事件和觀察者會做的T瑞克給你。

設置完成動畫後的回調函數以觸發事件。

監聽器將首先偵聽任何動畫事件，然後觸發事件偵聽完成事件。當完成事件被觸發執行初始動畫event.run方法（或任何你想將它命名）

在聽者 上newanimationeventtriger（new_anim）等待x秒（以消除無限循環POSS），而如果該事件觸發器完成== true {new_anim。跑（）; }