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()

防止排队fadeOut动画。

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

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

Answer 3

查看.delay

更多细节：设置fadeOut（）动画所需的时间，并使用比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
    });
});

Answer 4

在动画完成之前，回调真的不应该开始。您是否尝试在fadeOut上设置速度 - 文档（并不总是准确）将其显示为必需参数，如果您指定回调，它可能就是 - 也就是说，它可能正在评估函数的速度如果你没有明确提供一个。

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

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

JQuery：淡出，执行一个动作，然后淡出

4 个答案: