I am excited with the addition of delay() in jQuery 1.4. The .delay() method allows us to delay the execution of functions that follow it in the queue. I have been using it in a couple of places and here’s a small demo of how useful the delay() method is to chain effects:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Delay a Button Click</title>
<style type="text/css">
.divOne{
height:40px;
width:100px;
background-color:Gray;
}
</style>
<script language="javascript" type="text/javascript"
src="http://code.jquery.com/jquery-latest.js"></script>
<script language="javascript" type="text/javascript">
$(function() {
$('.btn').click(function() {
$('.divOne').slideUp(500).delay(1500)
.slideDown(500).delay(1000).slideUp(500);
});
});
</script>
</head>
<body>
<form>
<div>
<input id="btnOne" type="button" value="Click Me"
class="btn" />
<br />
<div class="divOne">
</div>
</div>
</form>
</body>
</html>
Here we first slide up the div for 500 milliseconds, then pause for 1.5 seconds, slide down the div for 500 milliseconds, then pause for 1 second and then slide up the div for 500 milliseconds.
This is just awesome! See a Live Demo
Thanks for your help on this. Very cool article. BTW, I've created a beginner tutorial on using jquery slideup and slidedown, please feel free to check it out at: http://www.tonylea.com/2010/jquery-slideup-and-slidedown/
ReplyDeleteThanks
Good job Tony. I like the idea of adding a video along with the demo. Why $('#object')? For better readibility and ease of access, I prefer adding a class to my elements and refering them with the class name.
ReplyDeletehi there.
ReplyDeletei am trying to create a slide from left side of page and it should automatically come after page load and delay should 20 secs to hide and it should be without buttons. Thank you..