jQuery 面板在页面加载时向下滑动然后向上滑动答案

【问题标题】：jQuery panel to slide down then up on page loadjQuery 面板在页面加载时向下滑动然后向上滑动
【发布时间】：2011-05-04 09:20:57
【问题描述】：

这应该很简单，但是我无法让它正常工作。

以下代码应该能够执行以下操作。页面完成加载后，页面顶部的 div (div#panel) 应该向下滚动到视图中。延迟几秒钟后，div 应该向上滚动出视图。当用户点击触发器时，div 还应该能够上下切换/滑动。

提前感谢您的建议/建议。

$(document).ready(function() {

    $("div#panel").slideDown("slow");
    setTimeout(function(){ 
    $("div#panel").slideUp("slow"); 
    }, 5000);

});

$(document).ready(function() {

    // Expand Panel
    $("#open").click(function(){
        $("div#panel").slideDown("slow");
    }); 

    // Collapse Panel
    $("#close").click(function(){
        $("div#panel").slideUp("slow"); 
    });         
});

【问题讨论】：

代码是正确的，这里不起作用

标签： jquery delay slidedown slideup

【解决方案1】：

您必须先hide() 面板，它才能滑入视图。

$(document).ready(function(){
    $("div#panel").hide();

    var autoTimer = null;

    autoTimer = setTimeout(function(){
        $("div#panel").slideDown("slow");
        autoTimer = setTimeout(function(){
            $("div#panel").slideUp("slow");
        }, 5000);
    },2000);

    $("#open").click(function(){
        $("div#panel").slideDown("slow");
        if(autoTimer) clearTimeout(autoTimer);
        autoTimer = null;
    });

    $("#close").click(function(){
        $("div#panel").slideUp("slow");
        if(autoTimer) clearTimeout(autoTimer);
        autoTimer = null;
    });         
});

演示：http://jsfiddle.net/X9Vn4/6/

【讨论】：

太棒了！这似乎是要走的路。但是，在页面完成加载之前，div 会向下滑动。会玩一下看看能做什么......
在这种情况下，您可以将自动滑动位放入加载函数中：$(document).load(function(){...});。这只会在您的整个页面（包括图片）完成加载后触发。
DarthJDG - 这是有道理的，但是由于这是一个 WordPress 网站，不幸的是它有点棘手。有没有办法使用.delay()？我试过了，但没有用...
我不明白为什么绑定到加载事件在 wordpress 网站上不起作用，但如果你只想做一个平坦的延迟，你可以将自动滑动代码包装到另一个超时，比如这个：jsfiddle.net/X9Vn4/3
delay() 对于纯动画来说更优雅，但您可能出于某些原因想要取消超时，例如如果用户开始使用打开/关闭按钮，您可能不想自动-开关。由于 jQuery 中的一个错误，停止延迟动画存在问题，所以 clearTimeout() 应该是要走的路。我编辑了我的帖子，现在如果用户手动打开/关闭面板，它会取消自动滑动。

【解决方案2】：

你也可以试试这个。当 slideDown 完成执行时加载 slideUp。

$('#id').slideDown(500, function(){
   setTimeout(function(){$('#id').fadeOut(500)}, 1500);
});

【讨论】：

【解决方案3】：

Try this :
$(document).ready(function(){
   setTimeout('slide_div()',5000);
  $('#open').click(function(){
      $('#pane1').slideDown('slow');
  });

  $('#close').click(function(){
      $('#pane1').slideUp('slow');
  });
});

function slide_div()
{
   $('#pane1').slideToggle();
 }

【讨论】：