停止Jquery .Animate（）新的.Animate（）

Question

我试图给一个推出框添加动画以显示该区域要做的事情列表。

不幸的是，如果您快速点击2个或更多个框，它会展开所有点击的框，然后再次锁定框。

你可以点击任何未选定的盒子，但我不能在我的生活中防止他们两个出现在同一时间的问题。

我不是100％确定我正确使用.stop命令。

请帮忙！

这是我的代码。这里还有一个jsfiddle链接，附带一些演示。 http://jsfiddle.net/hceFT/4/

$(document).ready(function() { 
    $("#attractionsbox").css({ width:0 }); 
    $("#entertainmentbox").css({ width:0 }); 
    $("#diningbox").css({ width:0 }); 
    $("#attractionspointer").css({ width:0 }); 
    $("#entertainmentpointer").css({ width:0 }); 
    $("#diningpointer").css({ width:0 }); 
    $("#experiences").css('overflowY' , 'hidden'); 
}); 


$("#freefunbutton").click(function() { 
    if ($("#freefunbox").width()) {} else { 
     $(".contentbox").stop(true, false).animate({ 
      width: 0 
     }, 200, function() { 
      $(".pointer").animate({ 
       width: 0 
      }, 50, function() { 
       $("#freefunpointer").animate({ 
        width: 40 
       }, 50, function() { 
        $("#freefunbox").animate({ 
         width: 500 
        }, 200); 
       }); 
      }); 
     }); 
    } 
}); 

$("#attractionsbutton").click(function() { 
    if ($("#attractionsbox").width()) {} else { 
     $(".contentbox").stop(true, false).animate({ 
      width: 0 
     }, 200, function() { 
      $(".pointer").animate({ 
       width: 0 
      }, 50, function() { 
       $("#attractionspointer").animate({ 
        width: 40 
       }, 50, function() { 
        $("#attractionsbox").animate({ 
         width: 500 
        }, 200); 
       }); 
      }); 
     }); 
    } 
}); 

$("#entertainmentbutton").click(function() { 
    if ($("#entertainmentbox").width()) {} else { 
     $(".contentbox").stop(true, false).animate({ 
      width: 0 
     }, 200, function() { 
      $(".pointer").animate({ 
       width: 0 
      }, 50, function() { 
       $("#entertainmentpointer").animate({ 
        width: 40 
       }, 50, function() { 
        $("#entertainmentbox").animate({ 
         width: 500 
        }, 200); 
       }); 
      }); 
     }); 
    } 
}); 

$("#diningbutton").click(function() { 
    if ($("#diningbox").width()) {} else { 
     $(".contentbox").stop(true, false).animate({ 
      width: 0 
     }, 200, function() { 
      $(".pointer").animate({ 
       width: 0 
      }, 50, function() { 
       $("#diningpointer").animate({ 
        width: 40 
       }, 50, function() { 
        $("#diningbox").animate({ 
         width: 500 
        }, 200); 
       }); 
      }); 
     }); 
    } 
}); 

Answer 1

当你调用一个新的动画通过clearQueue取消所有预先存在的：http://api.jquery.com/clearQueue/

或者，如果你想保持一些动画只停止那些你不想通过停止运行了：http://api.jquery.com/stop/