jquery加载fadein和fadeout的内容

Question

我正在使用jquery淡出特定div然后我想将新内容淡化到同一个div。淡出效果很好，但没有褪色...而是只是立刻“弹出”而没有任何淡化效果。

这就是我所拥有的：

$('#account-info-form').fadeOut('slow', function(){
    $('#tab_account_info').load('/account/ #account-info-form', function() {
        $('#account-info-form').fadeIn('slow');
        // show success toast
        toastr.info('Your profile has been updated.', 'Updated!');
        // reinitialize the form validation stuff
        AccountProfile.init();
    });
});

Answer 1

您正在用新的可见元素替换隐藏元素。您应该淡化包含元素。根据您的代码，它似乎是#tab_account_info。如果由于某种原因你无法隐藏#tab_account_info，那么你应该添加一个包装元素并淡化/加载它。

发生这种情况的原因是，当您使用fadeOut时，会添加一个隐藏元素的内联样式。当替换该元素时（在这种情况下通过load），内联样式将丢失。

另一种选择是在调用fadeIn之前简单地隐藏新元素：

$('#account-info-form').hide().fadeIn('slow');