jQuery:淡出，执行操作，然后淡入 [英] JQuery: Fading Out, Performing an Action, then Fading Back In

问题描述

所以，我有什么相当于html形式的内容，但实际上不是真正的<form>.我现在有一个清除"按钮，用于将所有字段重置为默认值.

So I have what amounts to an html form, but is not an actual <form>, per se. I have a 'Clear' button that I am currently using to reset all of the fields back to their defaults.

从美学的角度来看，我希望表单淡出，在消失"时重置，然后在完全重置后逐渐消失.到目前为止，我已经有了这段代码来尝试实现这一目标:

From an aesthetic standpoint, I would like for the form to fade out, reset while it's "gone", and fade back in completely reset. I've got this code so far to try to achieve this:

function Reset() {

    $formDiv.fadeOut(function() {

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

但是，发生的情况是，随着div逐渐淡出，这些字段将重置，因此用户可以看到它们在逐渐淡出时实际上全部恢复为默认值.然后，一旦淡出淡出，淡入淡出.关闭，但我不希望用户看到重置的字段.我尝试了以下操作，以便等到fadeOut完成以重置字段后，但遇到无限循环或类似的操作(浏览器说脚本运行缓慢，并询问我是否要停止它):

However, what happens is, as the div is fading out, the fields get reset, so the user sees them all physically change back to their defaults while it's fading out. Then it fades back in as soon as it has finished fading out. Close, but I don't want the user to see the fields getting reset. I tried the following so it would wait until the fadeOut completed to reset the fields, but I got an infinite loop or something (the browser said the script was running slowly and asked me if I wanted to stop it):

function Reset() {

    $formDiv.fadeOut(function() {

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

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

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

So I'm not really sure where to go from here. Any help would be appreciated. Thanks.

推荐答案

我最近在fadeOut上遇到了同样的问题，但似乎无法正常工作，我找到了解决方案:

I had the same problem lately with fadeOut that seems to be working incorrectly, and I found the solution for it:

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

   //here changes to this element

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

它看起来与fadeIn/fadeOut相同，但是按预期方式工作(在元素不可见的情况下进行了更改)

It looks the same as fadeIn/fadeOut but it works as is expected (changes are made while element is invisible)

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

I hope some of you will find it useful.

这篇关于jQuery:淡出，执行操作，然后淡入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！