jQuery Delay Function Example
Let's have a closer look at the jQuery .delay() function.
Description
In this demonstration we're going to make use of jQuery's awesome function chaining ability by running .fadeOut(), .fadeIn() and .delay() functions together on the same element. Very similar to the setTimeout function but without the ability to easily interrupt the delay. Lets have a look at an example of the delay jQuery function in action. Further Reading »
Demo
Demo: Using .delay() to create a delay between function calls.
I will show for 1.5 seconds.
Download
The download package includes all the inline HTML, CSS, JavaScript, jQuery and images required for the .delay() function demo so you can try it yourself and change as you please.
Code
<!-- Copyright 2011 jQuery4u.com -->
<!DOCTYPE html>
<html>
<title>jQuery Function Demo - jQuery4u.com</title>
<head>
<script src="http://www.jquery4u.com/function-demos/js/jquery-1.6.4.min.js"></script>
<script src="http://www.jquery4u.com/scripts/function-demos-script.js"></script>
<script type="text/javascript">
var JQFUNCS =
{
runFunc:
{
/* ------------------------------ Delay Demo ------------------------------ */
"delay":
{
run: function(id)
{
$('#'+id)
.hide()
.fadeIn('slow')
.delay(1500)
.fadeOut('slow');
},
reset: function(id)
{}
}
}
}
</script>
</head>
<body>
<p class="example">Demo: Using .delay() to create a delay between function calls.</p>
<p><a href="#" id="delay-demobtn" class="demobtn btn actionr">Run Demo</a> <a href="#" id="delay-codebtn" class="codebtn btn actionr">View Code</a></p>
<div class="demoarea" id="delay">I will show for 1.5 seconds.</div>
</body>
</html>
<!-- Copyright 2011 jQuery4u.com -->