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

Question

所以我有一个 html 表单，但不是实际的<form>，本身。我有一个“清除”按钮，我目前正在使用它来将所有字段重置为默认值。

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

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 动画时间更长的延迟。在此示例中，重置操作将在 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
    });
});