Question

编辑BELLOW

如何在#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
        });
   });

我没有使用条件语句

的简短方法

Answer 1

您始终可以将回调函数传递给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
            });
        });

   });

Answer 2

回调功能应该适用于这种情况，但有一点需要考虑的是，如果你已经动画到10x10的盒子（例如）并且你要求jQuery动画为相同的10x10大小 - jQuery将动画视为已经完成。所以在这种情况下它会立即执行回调。我猜你的动画块可能需要调整。

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

http://jsfiddle.net/ufomammut66/YAVk4/

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

Answer 3

我重新写了这个陈述，所以它不是简写，而且工作正常。

$("#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");
                });
            }
        });

带有回调函数的jQuery动画条件

3 个答案: