I'm trying to create an effect where the page loads, and after 5 seconds, the success message on the screen fades out, or slides up.
How can I achieve this?
Solution:
There are a few different ways to achieve this:
-
Javascript's built-in setTimeout method
-
jQuery's delay method (available in jQuery 1.4+)
Example:
$(document).ready(function(){
setTimeout(function(){
$('.my-element').fadeIn();
}, 5000);
// or...
$('.my-element').delay(5000).fadeIn();
});
Source: Tips4all
Built in javascript setTimeout.
ReplyDeletesetTimeout(
function()
{
//do something special
}, 5000);
UPDATE: you want to wait since when the page has finished loading, so put that code inside your $(document).ready(...); script.
UPDATE 2: jquery 1.4.0 introduced the .delay method. Check it out.
Use a normal javascript timer:
ReplyDelete$(function(){
function show_popup(){
$("#message").slideUp();
};
window.setTimeout( show_popup, 5000 ); // 5 seconds
});
This will wait 5 seconds after the DOM is ready. If you want to wait until the page is actually loaded you need to use this:
$(window).load(function(){
function show_popup(){
$("#message").slideUp();
};
window.setTimeout( show_popup, 5000 ); // 5 seconds
})
EDIT: In answer to the OP's comment asking if there is a way to do it in jQuery and not use setTimeout the answer is no. But if you wanted to make it more "jQueryish" you could wrap it like this:
$.wait = function( callback, seconds){
return window.setTimeout( callback, seconds * 1000 );
}
You could then call it like this:
$.wait( function(){ $("#message").slideUp() }, 5);