jQuery panel to slide down then up on page load
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");
});
});
Solution
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;
});
});
OTHER TIPS
You could also try this. Load slideUp when slideDown completes execution.
$('#id').slideDown(500, function(){
setTimeout(function(){$('#id').fadeOut(500)}, 1500);
});
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();
}
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow