JQuery的：淡出，执行操作，然后衰落早在

StackOverflow https://stackoverflow.com/questions/2165387

  •  24-09-2019
  •  | 
  •  

题

所以我有什么相当于一个HTML表单，而不是实际的<form>本身。我有我目前使用重置所有字段回到他们默认一个“清除”按钮。

从美学角度来看，我想为形式淡出，复位而它的“走”和淡入背部完全复位。我有了这个代码，到目前为止，试图实现这一点：

function Reset() {

    $formDiv.fadeOut(function() {

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

但是，什么情况是，因为DIV是淡出，字段得到复位，所以用户看到他们，而它的淡出所有物理变回默认值。然后，它一旦它已经完成淡出淡入回。关闭，但我不希望用户看到越来越复位等领域。我尝试以下，因此将等到淡出完成重置的域，但我得到了一个无限循环或某事（浏览器说，脚本运行缓慢，并问我，如果我想阻止它）：

function Reset() {

    $formDiv.fadeOut(function() {

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

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

所以，我真的不知道在哪里可以从这里走。任何帮助，将不胜感激。感谢。

有帮助吗？

解决方案

我有同样的问题最近与fadeOut，这似乎是不正确地工作，我发现对于它的解决方案：

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

   //here changes to this element

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

它看起来一样淡入/淡出，但它的工作原理如预期（而元素是不可见的变更时）

我希望一些你会发现它是有用的。

其他提示

使用

jQuery.stop().fadeOut()

，以防止排队的淡出动画。

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

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

在回调真的应该不火，直到完成动画。您是否尝试过在淡出设定的速度 - 文档（这并不总是准确）显示它作为一个所需的参数，如果你指定一个回调也许会是 - 也就是说，它可以被评估功能的速度如果您没有提供一个明确的。

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

修改：通过代码寻找后，它将显示（在1.3.2，至少），如果提供一个函数作为第一个参数，它会计算它，并使用返回值作为速度。如果指定一个速度，那么你的回调函数应该像您期望的工作。该元素应该淡出，回调随后将火和你在代码复位和淡入淡出将被执行。

考查 .delay

的更多细节：设置时间的动画将采取淡出（），并使用延迟的淡入（）动画比所述淡出的动画时间长的量。在这个例子中，复位操作将在淡出动画期间发生，并且据推测不大于600毫秒需要更长的时间。

$formDiv.fadeOut(600,function() {

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

编辑：糟糕，略微误解的问题。你想重置形式逻辑是对淡入（）调用，而不是淡出触发。但我认为它仍然很好的同步动画事件。尝试是这样的：

$formDiv.fadeOut(600,function() {
    $(this).delay(650).fadeIn(function() {
        // perform reset actions here
    });
});
许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top