Menu
I'm trying to implement a very simple footer notification element to slide up for a moment, then slide back down. I'm using:
$('button').click( function () {
$('#message-box').slideUp('slow').delay(1500).slideDown('slow');
});
However, when you click the button, it delays for the 1500 ms then slides up and never slides down.
http://jsfiddle.net/jrMH3/17/
442
jQuery slideToggle() Method The slideToggle() method toggles between slideUp() and slideDown() for the selected elements. This method checks the selected elements for visibility. slideDown() is run if an element is hidden. slideUp() is run if an element is visible - This creates a toggle effect.
The slideUp() is an inbuilt method in jQuery which is used to hide the selected elements. Syntax: $(selector). slideUp(speed); Parameter: It accepts an optional parameter “speed” which specifies the speed of the duration of the effect.
What you actually want is this:
$('#message-box').slideDown('slow').delay(1500).slideUp('slow');
You can test it here. Though it seems a bit backwards given your layout, .slideDown() is for showing an element, and .slideUp() is for hiding an element...even though given your CSS it's actually going up when shown.
Also as an aside, you don't need <html> and <body> tags when editing the fiddle, these are already included...any content in the html frame will go inside the <body>.
88
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
