1

因此，我拥有相当于 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()
    });
}

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

4

4 回答 4

3

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

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

   //here changes to this element

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

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

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

于 2012-12-12T12:39:42.357 回答
1

利用 

jQuery.stop().fadeOut()

防止排队淡出动画。

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

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

于 2013-08-22T06:14:49.073 回答
0

查看.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
    });
});
于 2010-01-29T21:52:25.310 回答
0

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

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

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

于 2010-01-29T21:57:14.710 回答