Question

I’m trying to show one fieldset at a time, based on the user’s selection. The theory is that, all fieldsets should hide first, then the selected fieldset should be shown. I’m using jQuery’s fadeOut and ‘fadeIn` functions.

You can see a fiddle of this here.

But it doesn’t work just fine. What’s wrong? When you change the ownership type, first two fieldsets are shown, then they dim and fade out, and then the intended fieldset appears. However, the desired behavior is that, on change of the ownership type, the currently visible fieldset simply fade out, and then the intended fieldset fade in.

Answer 1

You can also use a ‘promise’ http://api.jquery.com/jQuery.when/ to be sure that fadein happens after when fieldset has faded out.

$(function() {
    var ownershipType = $('#ownershipType').first();
    var fieldsets = $('fieldset');
    ownershipType.change(function() {
        var promise = fieldsets.fadeOut(2000);
        $.when(promise).then( function () {$('fieldset[data-ownership-type=' + ownershipType.val() + ']').fadeIn('fast');
        });
    });
});

http://jsfiddle.net/DtaHQ/26/