jQuery淡出/淡入效果不如预期？

Question

我想要根据用户的选择，逐个显示一个“fieldset”。理论上说，所有“fieldset”应该先隐藏，然后显示所选的“fieldset”。我使用了jQuery的“fadeOut”和“fadeIn”功能。

您可以在此处查看这个示例：http://jsfiddle.net/saeedneamati/DtaHQ/1/。

但是它并不能正常工作。问题出在哪里？当您更改“所有权类型”时，首先会显示前两个“fieldset”，然后它们会变暗并淡出，然后才会出现预期的“fieldset”。但是，期望的行为是，在更改“所有权类型”时，当前可见的“fieldset”只需淡出，然后出现所需的“fieldset”。

- Saeed Neamati

---

你应该在这里发布代码，以备将来使用，以防jsfiddle不存在。 - Richard Dalton

Answer 1

您可以使用“promise”http://api.jquery.com/jQuery.when/来确保渐变发生在fieldset淡出之后。

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

- Vertigo

---

哇，太好了！我刚学到了新东西。感谢你的天才方式@Vertigo。 - Saeed Neamati

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

Code: http://jsfiddle.net/DtaHQ/20/

- Samich

---

你的解释太棒了@Samich。非常好的笔记。谢谢并点赞。 - Saeed Neamati

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

你只想淡出当前可见的fieldset。 http://jsfiddle.net/DtaHQ/24/

- Ray Toal

---

但是为什么我的代码不起作用呢？我的意思是，毕竟，淡出一个不可见的东西不应该会导致任何问题吧？ - Saeed Neamati

Samich已经有了答案。你的原始代码确实说“淡出所有字段集合”。但是你说得很对。fadeOut的文档确实说已经隐藏的div不会受到这个动画的影响。 :) 这有助于解释为什么你的问题获得了很多赞！ - Ray Toal