延迟动画，直到其他动画完成(滑动内容(

以下是我对它的看法，它是一个没有标记更改的替代品。当点击菜单项时，您希望发生以下三件事之一：

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
   }

好吧，我很确定还有其他更简单的可能性，我没有太多时间，但这里有一个正在工作的jsfiddle：http://jsfiddle.net/uaNKz/

基本上，您可以使用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');
    }
  });
});

如果一个div被展开，我会给出一个toggled类。由于你页面上的动画似乎很坏，我认为这将是一个更好的方法。但请记住：我的代码不是很好。只要速度快，就可以重构。它正在工作。。

与其使用切换，不如将一个on"click"处理程序绑定到您的".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(); });
      });
  });

我认为一个事件和观察者会帮你完成任务。

在动画完成时设置回调函数以触发事件。

侦听器将首先侦听任何动画事件，并且在该事件被触发之后侦听完成事件。当完成事件被激发时，执行初始动画事件.run方法（或您想称之为的任何方法）

在听众内部在newanimationeventtriger（newanim）上等待x秒（以消除无限循环poss），而如果此lastevent触发done=true{new_anim.run（）；}