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秒？

示例：

多次点击时的当前行为：

点击点击
向下滑动
显示4秒
向上滑动
重复两次

多次点击时所需的行为：

点击点击
向下滑动
显示4秒
向上滑动

注意：

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

Answer 1

只需将.stop(true)添加到通话开头即可。这将停止任何当前动画并清除动画队列，然后重新开始。此外，使用slideDown / slideUp，这样您就不会处于未确定状态。如果您在显示时单击，slideDown()将不会执行任何操作，然后将从该时间添加4000毫秒，直至slideUp()。

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

JSFiddle Demo

编辑：我了解到，.delay()和.stop()不能很好地融合在一起，正如doumentation（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

经过修改的解决方案，允许华丽在每次额外点击后保持打开状态

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

Answer 3

您需要使用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，但如果再次单击并且华丽可见，则停止上一个计时器并启动一个新计时器之一。

如何延长幻灯片切换的延迟而不重复效果？

3 个答案: