JQuery：淡出，执行操作，然后淡入

Question

所以我有一个相当于 html 表单的东西，但本身并不是一个实际的

。我有一个“清除”按钮，目前正在使用该按钮将所有字段重置回默认值。

从美学的角度来看，我希望表单淡出，在“消失”时重置，然后在完全重置时淡出。到目前为止，我已经有了这段代码来尝试实现此目的：

function Reset() {

    $formDiv.fadeOut(function() {

        // perform reset actions here
        $(this).fadeIn()
    });
}

但是，发生的情况是，当 div 淡出时，字段会被重置，因此用户会看到它们在淡出时物理上全部更改回默认值。然后，在淡出完成后，它会立即淡入。关闭，但我不希望用户看到字段被重置。我尝试了以下操作，所以它会等到 fadeOut 完成才能重置字段，但我遇到了无限循环或其他问题（浏览器说脚本运行缓慢并询问我是否要停止它）：

function Reset() {

    $formDiv.fadeOut(function() {

        while (!$(this).is(':animated')) {
            // perform reset actions here
        }

        $(this).fadeIn()
    });
}

所以我不是真的很确定从这里去哪里。任何帮助将不胜感激。谢谢。

Answer 1

我最近在 fadeOut 上遇到了同样的问题，似乎工作不正确，我找到了解决方案：

$(this).animate({opacity:'0'},function(){

   //here changes to this element

   $(this).animate({opacity:'1'});
})

它看起来与 fadeIn/fadeOut 相同，但它按预期工作（在元素时进行更改）是看不见的）

我希望你们中的一些人会发现它很有用。

Answer 2

用于

jQuery.stop().fadeOut() 

防止将淡出动画排队。

.stop() can be used to prevent queueing any jQuery Animation 

http://api.jquery.com/stop/

Answer 3

在动画完成之前，回调确实不应该触发。您是否尝试过在 fadeOut 上设置速度 - 文档（并不总是准确）将其显示为必需参数，如果您指定回调，则可能会这样 - 即，它可能会将函数评估为速度如果您没有明确提供。

$formDiv.fadeOut('fast', function() {
    // perform reset
    $(this).fadeIn();
});

编辑：查看代码后，看起来（至少在 1.3.2 中）如果您提供一个函数作为第一个参数，它将对其求值并使用返回值作为速度。如果您指定速度，那么您的回调函数应该按您的预期工作。该元素应该淡出，然后回调将触发，并且您的重置和淡入代码将被执行。

Answer 4

查看 .delay

更多详细信息：设置动画在 fadeOut() 中花费的时间，并对 fadeIn() 动画使用比 fadeOut 动画时间长的延迟。在此示例中，重置操作将在淡出动画期间发生，并且大概不会超过 600 毫秒。

$formDiv.fadeOut(600,function() {

    // perform reset actions here
    $(this).delay(650).fadeIn()
});

编辑：哎呀，稍微误解了这个问题。您希望重置表单逻辑在 fadeIn() 调用上触发，而不是在 fadeOut 上触发。但我觉得同步动画事件还是不错的。尝试类似的方法：

$formDiv.fadeOut(600,function() {
    $(this).delay(650).fadeIn(function() {
        // perform reset actions here
    });
});