Javascript jQuery动画条件w/a回调函数

编辑以下内容

当#contentBox动画完成时，如何对#west动画调用进行编码

基本上，我有一个切换按钮，可以设置/更改一个div的css动画，然后在第一个动画完成后设置/更改另一个div的css动画；然后在下次执行切换时反转

感谢您的帮助。多谢各位

条件语句：

$("#menuToggle").click(
    function() {

        var $west = $("#west");
        var $contentBox = $("#contentBox");

        $contentBox.animate({
                marginLeft : parseInt($contentBox
                        .css('marginLeft'), 10) == -320
                        ? $contentBox.outerWidth()
                        : -320
        });

        $west.animate({
            left : parseInt($west
                .css("left"), 10) == 0 
                ? -$west.outerWidth() 
                : 0
        });
   });

---

我采用了旧的方法，没有简写条件语句

您始终可以将回调函数传递给animate（）方法，该方法在动画完成后执行

$("#menuToggle").click(
    function() {

        var $west = $("#west");
        var $contentBox = $("#contentBox");

        $contentBox.animate({
                marginLeft : parseInt($contentBox
                        .css('marginLeft'), 10) == -320
                        ? $contentBox.outerWidth()
                        : -320
        }, 5000, function() {
             //this is the callback part
            $west.animate({
                left : parseInt($west
                    .css("left"), 10) == 0 
                    ? -$west.outerWidth() 
                    : 0
            });
        });

   });

---

回调函数应该在这种情况下工作，但要考虑的是，如果你已经动画到一个10x10的方块（例如），并要求jQuery动画到同一个10x10大小-jQuery看到动画已经完成。因此，在本例中，它将立即执行回调。我猜动画的if块可能需要调整

您可以做的一件事是在onClick事件上添加一个2状态检查，如下所示：

---

我建议添加/删除类并检查类以保持动画状态，但我制作了这个快速而肮脏的XD。

我重新编写了该语句，因此它不是简写的，而且工作正常

$("#menuToggle").click(

        function() {
            //var n = $("#west");
            var position = $("#west").offset();

            if (position.left == "0") {
                $("#west").animate({"left" : "-=300px"}, "slow")
                .animate({"width" : "1%"}, "fast", 
                    function() {
                    $("#contentBox").animate({"width" : "98%"}, "normal");
                });
            } else {
                $("#contentBox").animate({"width" : "70%"}, "normal", 
                    function() {
                    $("#west").animate({"width" : "30%"}, "fast")
                    .animate({"left" : "+=300px"}, "slow");
                });
            }
        });

---

谢谢。这就是我的想法，但是当只单击切换时，回调会运行，如果再次单击切换，它们都会运行，但不同步。@Andaero，运行异步不是一个好的解决方案。给动画效果一点喘息的空间来完成不是更好吗？我能做到吗？谢谢你的帮助。