0

I have a dropdown that allows selecting different shipping methods. When selecting one, a different div displays, hiding the other two. I'm using jQuery to smoothly fade the divs in and out. After the animations are done, I need to run the fixHeight method of jQuery DataTables to properly reset the height of the wizard container.

I've tried various methods including queue/dequue but the fixHeight keeps firing too soon. Is there a better way to toggle these divs? And how do I make sure they are complete before executing fixHeight without resorting to adding a callback for each div animation and nesting 4 levels deep?

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

Edit 1

This version works better, but just feels dirty with all the nesting, but maybe the best way?

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"); }); 
                }); 
            });
    }
}
Connie DeCinko
  • 996
  • 5
  • 19
  • 39
  • http://api.jquery.com/fadeout/ and http://stackoverflow.com/questions/8207897/jquery-waiting-for-the-fadeout-to-complete-before-running-fadein – Mojtaba Aug 16 '16 at 14:45
  • Possible duplicate of [How to get jQuery to wait until an effect is finished?](http://stackoverflow.com/questions/1065806/how-to-get-jquery-to-wait-until-an-effect-is-finished) – Liam Aug 16 '16 at 15:10
  • I'd probably use the [promise method form that question](http://stackoverflow.com/a/19075240/542251) – Liam Aug 16 '16 at 15:11
  • This is not a duplicate of the hundreds of other posts because they all deal with a single animation followed by a single function. I am trying to run multiple animations, in a row or together, and THEN run a function. See my nested Edit 1 above which allows ALL animations to be complete before resetting the height. Thanks. – Connie DeCinko Aug 16 '16 at 15:15

0 Answers0