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

Question

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

以下代码应该能够执行以下操作。页面加载完成后，页面顶部的 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"); 
    });         
});

Answer 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/

Answer 2

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

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

Answer 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();
 }