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/