动画完成后运行功能

Question

我有一个下拉列表，可以选择不同的送货方式。选择一个时，会显示另一个div，隐藏另外两个。我使用jQuery来平滑淡入淡出div。动画完成后，我需要运行jQuery DataTables的fixHeight方法来正确重置向导容器的高度。

我尝试了各种方法，包括队列/ dequue但是fixHeight一直在停止射击。有没有更好的方法来切换这些div？如何在执行fixHeight之前确保它们是完整的，而不需要为每个div动画添加回调并嵌套4个级别？

function toggleShipPickup() {
    $("#wizard").smartWizard("hideMessage");
    $("#wizard").smartWizard("setError", { stepnum: 2, iserror: false });

    $("#wizard").queue(function() {
        if ($("#<%= shippingChoice_DropDownList.ClientID %>").val() == "") {
            $("#shippingAddressForm").fadeOut();
            $("#pickupPhoenix").fadeOut();
            $("#pickupTucson").fadeOut();
        }
        else if ($("#<%= shippingChoice_DropDownList.ClientID %>").val() == "ship") {
            $("#shippingAddressForm").fadeIn();
            $("#pickupPhoenix").fadeOut();
            $("#pickupTucson").fadeOut();
            ;                }
        else if ($("#<%= shippingChoice_DropDownList.ClientID %>").val() == "pickupPhx") {
            $("#shippingAddressForm").fadeOut();
            $("#pickupPhoenix").fadeIn();
            $("#pickupTucson").fadeOut();
        }
        else if ($("#<%= shippingChoice_DropDownList.ClientID %>").val() == "pickupTucson") {
            $("#shippingAddressForm").fadeOut();
            $("#pickupPhoenix").fadeOut();
            $("#pickupTucson").fadeIn();
        }
    }).dequeue().smartWizard("fixHeight");
}

修改1

这个版本效果更好，但是对于所有嵌套感觉都很脏，但也许是最好的方法？

function toggleShipPickup() {
    $("#wizard").smartWizard("hideMessage");
    $("#wizard").smartWizard("setError", { stepnum: 2, iserror: false });

    if ($("#<%= shippingChoice_DropDownList.ClientID %>").val() == "") {
        $("#shippingAddressForm").slideUp(
            function() { $("#pickupPhoenix").slideUp(
                function() { $("#pickupTucson").slideUp(
                    function () { $("#wizard").smartWizard("fixHeight"); }); 
                }); 
            });
    }
    else if ($("#<%= shippingChoice_DropDownList.ClientID %>").val() == "ship") {
        $("#shippingAddressForm").slideDown(
            function() { $("#pickupPhoenix").slideUp(
                function() { $("#pickupTucson").slideUp(
                    function () { $("#wizard").smartWizard("fixHeight"); }); 
                }); 
            });
    }
    else if ($("#<%= shippingChoice_DropDownList.ClientID %>").val() == "pickupPhx") {
        $("#shippingAddressForm").slideUp(
            function() { $("#pickupPhoenix").slideDown(
                function() { $("#pickupTucson").slideUp(
                    function () { $("#wizard").smartWizard("fixHeight"); }); 
                }); 
            });
    }
    else if ($("#<%= shippingChoice_DropDownList.ClientID %>").val() == "pickupTucson") {
        $("#shippingAddressForm").slideUp(
            function() { $("#pickupPhoenix").slideUp(
                function() { $("#pickupTucson").slideDown(
                    function () { $("#wizard").smartWizard("fixHeight"); }); 
                }); 
            });
    }
}