Question

我有这段代码：

if(error == false)
   $('#messageError').slideDown('slow').delay(1500).slideUp('slow');
else
   $('#messageError').slideUp('slow');

如果error等于false，则$('#messageError')会弹出，并在1.5秒内消失。想象一下，在延迟时间到来之前，error等于true。我想隐藏它之前隐藏它。

唯一有效的是hide()，但我想隐藏＆＃39;它弹出的方式一样！

Answer 1

您可以使用stop()

执行此操作

stop()强制停止当前动画。

例如：

if(error == false)
    $('#messageError').slideDown('slow').delay(1500).slideUp('slow');
else
    $('#messageError').stop().slideUp('slow');

关于链接与回调的提醒

像你一样的链接仅适用于动画队列，如果你想做其他处理代码，例如css()（未排队）使用回调方法。

例如：

// The `css();` is immediately fired before sliding down, not after!
$('#messageError').slideDown('slow').css({'opacity:0.5'}).delay(1500).slideUp('slow');

// Here it changes opacity after the slide down
$('#messageError').slideDown('slow', function(){
    $(this).css({'opacity:0.5'}).delay(1500).slideUp('slow');
});

Answer 2

你可以做的是使用slideToggle jQuery函数，这样你就可以在状态为up或down时解决问题。您还需要使用stop功能，以便中断动画。

这是jsFiddle：https://jsfiddle.net/drjk7mvv/

的jQuery

$(function () {
    $('.slideToggle').on('click', function () {
        $('#messageError').stop().slideToggle('slow');
    });

});

HTML

<button type="button" class="slideToggle">Toggle error</button>
<div id="messageError">
     <h1>ERROR</h1>
</div>

CSS

#messageError
{
    position: absolute;
    height: 150px;
    background-color: #F00;
}

slideDown（＆＃39; slow＆＃39;。）delay（1500）.slideUp（＆＃39; slow＆＃39;）如何在其功能完成之前slideUp（）？

2 个答案: