Question

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

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

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

Answer 1

你也可以使用'promise'http://api.jquery.com/jQuery.when/来确保在fieldset淡出之后falin发生。

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

Answer 2

问题是你已经隐藏了fieldset，对于这些元素，fadeOut的动画会立即触发，因为它已经隐藏了。

尝试更改为：

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

代码：http://jsfiddle.net/DtaHQ/20/

Answer 3

将您的代码更改为

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

您只想淡出当前可见的字段集。

http://jsfiddle.net/DtaHQ/24/

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

3 个答案: