当前位置：文江博客话题详情

jQuery fadeOut/fadeIn 未按预期工作？

发布于 2024-12-07 19:18:22 字数 354 浏览 1 评论 0原文

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

您可以在此处看到这个小提琴。

但效果并不好。怎么了？当您更改所有权类型时，首先显示两个字段集，然后它们变暗并淡出，然后出现预期的字段集。然而，期望的行为是，在更改所有权类型时，当前可见的字段集会淡出，然后预期的字段集会淡入。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

羁〃客ぐ 2024-12-14 19:18:22

您还可以使用“承诺”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/

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/

回复收藏 0 原文

雨巷深深 2024-12-14 19:18:22

问题是您已经隐藏了 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/

The problem is that you already have hidden fieldset and for these elements animation of the fadeOut fires immediately, because of it's already hidden.

Try to change to this:

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

回复收藏 0 原文

旧人哭 2024-12-14 19:18:22

将代码更改为

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

Change your code to

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

You only want to fade out the fieldset that is currently visible.

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

回复收藏 0 原文

~没有更多了~