SlideUp and SlideDown using delay() in jQuery 1.4

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






About The Author

Suprotim Agarwal
Suprotim Agarwal, Developer Technologies MVP (Microsoft Most Valuable Professional) is the founder and contributor for DevCurry, DotNetCurry and SQLServerCurry. He is the Chief Editor of a Developer Magazine called DNC Magazine. He has also authored two Books - 51 Recipes using jQuery with ASP.NET Controls. and The Absolutely Awesome jQuery CookBook.

Follow him on twitter @suprotimagarwal.

3 comments:

Tony Lea said...

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/

Thanks

Suprotim Agarwal said...

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.

Unknown said...

hi there.
i 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..