Timer Based Animations using jQuery
Posted by: Suprotim Agarwal ,
on 12/11/2014,
in
Category jQuery and ASP.NET
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.
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
This article has been editorially reviewed by Suprotim Agarwal.
C# and .NET have been around for a very long time, but their constant growth means there’s always more to learn.
We at DotNetCurry are very excited to announce The Absolutely Awesome Book on C# and .NET. This is a 500 pages concise technical eBook available in PDF, ePub (iPad), and Mobi (Kindle).
Organized around concepts, this Book aims to provide a concise, yet solid foundation in C# and .NET, covering C# 6.0, C# 7.0 and .NET Core, with chapters on the latest .NET Core 3.0, .NET Standard and C# 8.0 (final release) too. Use these concepts to deepen your existing knowledge of C# and .NET, to have a solid grasp of the latest in C# and .NET OR to crack your next .NET Interview.
Click here to Explore the Table of Contents or Download Sample Chapters!
Was this article worth reading? Share it with fellow developers too. Thanks!
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
The Absolutely Awesome jQuery CookBook.
Suprotim has received the prestigious Microsoft MVP award for Sixteen consecutive years. In a professional capacity, he is the CEO of A2Z Knowledge Visuals Pvt Ltd, a digital group that offers Digital Marketing and Branding services to businesses, both in a start-up and enterprise environment.
Get in touch with him on Twitter @suprotimagarwal or at LinkedIn