jQuery fadeOut / fadeIn没有按预期工作？

我试图根据用户的选择一次显示一个字段集.理论上说,所有字段集应首先隐藏,然后应显示所选字段集.我正在使用jQuery的fadeOut和’fadeIn`函数.

你可以看到这个here的小提琴.

但它不能正常工作.怎么了？更改所有权类型时,会显示前两个字段集,然后它们会变暗和淡出,然后会出现预期的字段集.但是,所需的行为是,在更改所有权类型时,当前可见的字段集会淡出,然后预期的字段集淡入.

解决方法

您也可以使用’promise’ http://api.jquery.com/jQuery.when/来确保在fieldset淡出之后fadein发生.

$(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/