Question

我试图在点击链接时打开和关闭面板幻灯片，但是如果用户没有做任何事情，我还希望面板在5秒后崩溃。我有这种与.delay一起工作，但在那5秒钟内，我无法用.seriesLink切换面板，因为我不知道如何拦截延迟。因此，即使用户试图通过再次单击“系列”链接来关闭它，基本上该面板也会立即打开5秒钟。这是我的HTML和jQuery：

var container = $('.menu');
    $('.seriesLink').click(function( event ){
        // Prevent the default event
        event.preventDefault(); 
        // Toggle the slide based on its current visibility.
        if (container.is( ":visible" )){
            // Hide - slide up
            container.slideUp( );
        } 
        if (container.is(':hidden')) {
            // Show - slide down, pause 5 seconds, slide up
            container.slideDown().delay(5000).slideUp(); 
        }
    });

<a href="#" class="seriesLink">Series</a>
<div class="menu">
  <ul class="subMenu">
    <li><a href="http://www.google.com">Link title</a></li>
    <li><a href="http://www.google.com">Link title</a></li>
    <li><a href="http://www.google.com">Link title</a></li>
  </ul>
</div>

Answer 1

使用setTimeout：

container.slideDown();
setTimeout(function () {
    if (container.is(":visible")) {
        container.slideUp();
    }
}, 5000);

Answer 2

$('.seriesLink').click(function( event ){
    // Prevent the default event
    event.preventDefault(); 
    // Toggle the slide based on its current visibility.
    if (container.is( ":visible" )){
        // Hide - slide up
        container.slideUp( );
    } 
    if (container.is(':hidden')) {
        // Show - slide down, pause 5 seconds, slide up
        container.slideDown(function(){
            var self = $(this);
            setTimeout(function() {
                self.slideUp(); 
            },5000);
        });
    }
});

像这样做会保留你原来想要的行为：在.slideDown动画完成之后等待5秒，然后再向上滑动。

Answer 3

在点击功能中尝试此操作：

if (container.is(':hidden')) {
    // Show - slide down, pause 5 seconds, slide up
    container.slideDown();
    setTimeout(function(){
        container.slideUp();     
    },5000);
}

Answer 4

延迟功能将停止当前上下文中的所有javascript运行。您需要使用setTimeout来安排未来事件。

我在这个jsfiddle中实现了一个版本，如果链接被多次点击，它将取消之前的任何事件：

http://jsfiddle.net/FtqG8/

5秒后折叠jquery面板，或单击允许手动关闭

4 个答案: