代码之家 › 专栏 › 技术社区 › Matt Anxo P

jquery:淡出,执行操作,然后淡入

fadeout fadein reset jquery

Matt Anxo P · 技术社区 · 14 年前

所以我有相当于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 回复 | 直到 11 年前

Boeckm oelewapperke 11 年前

我最近也有同样的问题 fadeOut 这似乎工作不正常,我找到了解决办法:

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

   //here changes to this element

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

它看起来与fadein/fadeout相同,但工作正常(在元素不可见时进行更改)

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

cgupta 11 年前

使用

jQuery.stop().fadeOut()

以防止淡出动画排队。

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

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

tvanfosson 14 年前

在动画完成之前,回调确实不应该启动。是否尝试在fadeout上设置速度——文档(并不总是准确的)将其显示为一个必需的参数,并且可能只是指定了一个回调——也就是说,如果不显式地提供回调,它可能会将函数评估为速度。

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

编辑 :看完代码后,会显示(至少在1.3.2中)如果您提供一个函数作为第一个参数,它将对其进行评估,并使用返回值作为速度。如果指定了速度,则回调函数应该按预期工作。元素应该淡出,然后回调将触发,并执行重置和淡入代码。

ghoppe 14 年前

观察 .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
    });
});