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



Will you give this article a +1 ? Thanks in advance




About The Author

Suprotim Agarwal, ASP.NET Architecture MVP works as an Architect Consultant and provides consultancy on how to design and develop Web applications.

Suprotim is also the founder and primary contributor to DevCurry, DotNetCurry and SQLServerCurry. He has also written an EBook 51 Recipes using jQuery with ASP.NET Controls.

Follow him on twitter @suprotimagarwal

comments

2 Responses to "SlideUp and SlideDown using delay() in jQuery 1.4"
  1. Tony Lea said...
    December 25, 2010 at 7:56 PM

    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

  2. Suprotim Agarwal said...
    December 26, 2010 at 8:44 PM

    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.

 

Copyright © 2009-2014 All Rights Reserved for DevCurry.com by Suprotim Agarwal | Terms and Conditions