DotNetCurry Logo

Timer Based Animations using jQuery

Posted by: Suprotim Agarwal , on 12/11/2014, in Category jQuery and ASP.NET
Views: 11638
Abstract: In this article, we will explore how to create timer based animations using jQuery.

There are two functions built into JavaScript that allow you to implement a time based delay in your code – setTimeOut() and setInterval(). The difference between the two is that setTimeout performs an action only once after the specified time period elapses, however setInterval keeps repeating the action.

In this article, we’ll see how a <div> can be hidden once the user clicks on it. We will also see how to auto collapse the <div> if the user does not click on it within 10 seconds. Since we need to perform the action only once, we will use setTimeOut() to create a Time Bound Animation.

 

Create a new file ‘TimeBoundAnimations.html’. Use the following Div:

<div id="divautofade">
    Watch this Div auto close after 10 seconds.<br /><br />
    Alternatively, Click on the Div to close.
</div>

Let’s see the code which autocollapses our Div in 10 seconds if the user does not manually hide it by clicking on it.

$("#divautofade").on("click", function () {
    if (timer)
        clearTimeout(timer);
    $(this).slideUp('100');
});

var timer = setTimeout(function () {
    $("#divautofade").slideUp('100');
}, 10000);

As you can see, we have used setTimeout to add a delay, and run the code at a specified time interval of 10 seconds. The code hides the Div after 10 seconds by calling slideUp() on the Div.

We have also attached a click handler to the Div, which hides the Div using slideUp() when it is clicked upon. If you observe, setTimeout returns an ID timer which we pass to clearTimeout to cancel the running of the timeout. This is done to avoid slideUp from being triggered if the div is already clicked in that 10 second duration. If the timeout has already run, clearing it won’t do anything.

$("#divautofade").on("click", function () {
    if (timer)
        clearTimeout(timer);
    $(this).slideUp('100');
});

Save and view the file in your browser. Click on the Div to collapse it. Now refresh the page and wait for 10 seconds. The div will auto collapse.

jQuery Timer

Using this technique, you can build some cool notification widgets in your website!

Live Demo: http://www.jquerycookbook.com/demos/S9-General/70-TimeBoundAnimations.html

Using delay() and stop()

The same requirement can be achieved using a built-in function of jQuery - delay(). Let us see how.

Create a new file ’1-TimeBoundAnimations.html’. Our markup remains the same. Use the following code:

$("#divautofade").on('click', function () {
    $(this).stop(true).slideUp('100');
}).delay(10000).slideUp('100') 

As you can see, we have used chaining to elegantly achieve what we did with setInterval. The click hides the div using slideup(). We have used stop(true) to clear the animation queue so that delay(10000).slideUp('100') does not get fired if the div has already been closed by clicking on it.

Using delay() we set a timer to delay the slideup() in the queue by 10 seconds.

That’s it. Save and view the page in your browser and you have the same effect we achieved using setInterval().

Live Demo: http://www.jquerycookbook.com/demos/S9-General/70.1-TimeBoundAnimations.html

Further Reading:

http://api.jquery.com/delay/

http://api.jquery.com/stop/

https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers.setTimeout

 

Was this article worth reading? Share it with fellow developers too. Thanks!
Share on LinkedIn
Share on Google+
Further Reading - Articles You May Like!
Author
Suprotim Agarwal, MCSD, MCAD, MCDBA, MCSE, is the founder of DotNetCurry, DNC Magazine for Developers, SQLServerCurry and DevCurry. He has also authored a couple of books 51 Recipes using jQuery with ASP.NET Controls and a new one recently at The Absolutely Awesome jQuery CookBook.

Suprotim has received the prestigious Microsoft MVP award for nine times in a row now. In a professional capacity, he is the CEO of A2Z Knowledge Visuals Pvt Ltd, a digital group that represents premium web sites and digital publications comprising of Professional web, windows, mobile and cloud developers, technical managers, and architects.

Get in touch with him on Twitter @suprotimagarwal, LinkedIn or befriend him on Facebook



Page copy protected against web site content infringement 	by Copyscape




Feedback - Leave us some adulation, criticism and everything in between!