如何在不重复效果的情况下延长滑动切换的延迟？

Question

我想让它在单击按钮时显示隐藏的 div 几秒钟并再次隐藏。这段代码完成了：

HTML：

<button class="clicky">click me</button>

<div class="flashy" style="display: none; width: 150px; font-size: 18px; margin-top: 25px;">
    Now you see me!
</div>

JS：

jQuery(".clicky").on("click", function() {
    flashDiv();
});

function flashDiv()
{
    $(".flashy").slideToggle(100).effect("highlight", 300).delay(4000).slideToggle(100);
}

JSFIDDLE：http://jsfiddle.net/NRz34/1/

不过，有一点我很不喜欢：如果你快速连续多次点击按钮，效果会一遍遍重复（即它会向下滑动，显示几秒钟，向上滑动，然后重复单击按钮的次数）。

我的问题是，如何修改它，而不是一遍又一遍地上下滑动（无论它被点击了多少次），它在最后一次点击后只停留 4 秒？

示例：

多次点击时的当前行为：

1. 点击点击点击
2. 向下滑动
3. 显示 4 秒
4. 向上滑动
5. 再重复两次

多次点击时的期望行为：

1. 点击点击点击
2. 向下滑动
3. 显示 4 秒
4. 向上滑动

注意：

我意识到我可以检查 DIV 是否可见，如果是则忽略按钮按下，但这并不是我想要的行为。你看，我希望 DIV 在最后一次按下按钮后保持可见 4 秒，所以如果按下按钮，然后在 2 秒后再次按下，按钮应该再保持可见 4 秒（总显示时间为 6 秒）。

Answer 1

只需在通话开头添加.stop(true)。这将停止任何当前动画并清除动画队列，然后重新开始。另外，请使用slideDown/slideUp，这样您就不会处于未确定状态。如果你在它已经显示的时候点击，slideDown() 不会做任何事情，然后从那个时间到slideUp() 会增加 4000ms。

function flashDiv()
{
    $(".flashy").stop(true).slideDown(100).effect("highlight", 300).delay(4000).slideUp(100);
}

JSFiddle Demo

编辑：我了解到.delay() 和.stop() 不能很好地结合在一起，正如文献中提到的那样 (http://api.jquery.com/delay/)。

要解决这个问题，您可以使用带有无用动画的.animate()，例如将width 动画化为当前的width 值。还有，停止动画会导致highlight效果卡住，所以我在调用开始时清除了background-color：

function flashDiv()
{
    $(".flashy").css('background-color', 'transparent').stop(true).slideDown(100).effect('highlight', 300).animate({'width':150}, 4000).slideUp(100);
}

JSFiddle Demo

Answer 2

您需要使用setTimeout() 才能取消delay，因为无法取消jQuery 的延迟。

var timer;
jQuery(".clicky").on("click", function() {
    flashDiv();
});

function flashDiv()
{
    if($(".flashy").is(":visible")){
        window.clearTimeout(timer);
        $(".flashy").stop(true);
        timer = window.setTimeout(function() {
            $(".flashy").slideUp(100);
        }, 4000);
    }
    else{
        $(".flashy").slideDown(100).effect("highlight", 300);
        timer = window.setTimeout(function() {
            $(".flashy").slideUp(100);
        }, 4000);
    } 

}

(http://jsfiddle.net/g2wV4/3)

这样，您在 4 秒后启动计时器以执行 slideUp，但如果再次单击并且 闪烁 可见，您将停止前一个计时器并启动一个新计时器。

Answer 3

修改后的解决方案，允许在每次额外的 clcik 后保持打开状态

jQuery(".clicky").on("click", flashDiv);

function flashDiv() {

    var $flash = $(".flashy"), timer=$flash.data('timer');
    if (timer) {
        clearTimeout(timer);
        setSlideUp($flash);
    } else {
        $flash.slideDown(100).effect("highlight", 300, function () {
            setSlideUp($flash);
        })
    } 
}

function setSlideUp($flash) {
    var delay = 2000; /* shorter for demo purposes*/
    var timer = setTimeout(function () {
        $flash.slideUp();
       $flash.data('timer', false)
    }, delay)
    $flash.data('timer', timer)
}

DEMO