Question

This is suppose to be very simple, however I just can’t get it to work as it should.

The following code should be able to do the following. As soon as page completes loading, a div (div#panel) at the top of the page should scroll down into view. After a few seconds delay the div should scroll back up out off view. The div should also be able to toggle/slide up and down as user clicks on a trigger.

Thanks in advance for advice/suggestions.

$(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

You have to hide() the panel first, so it can slide into view.

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

Demo: http://jsfiddle.net/X9Vn4/6/