The jQuery setInterval() discussed before allows to call a function to execute in a set time delay in milli-seconds. In other words, the jQuery setInterval() function allows us to create loop animation much easier.

Today, I am going to talk about a jQuery timer plugin that can also create loop animation easily. I found this pugin some years ago. I forgot the download link of this jQuery plugin. The plugin version I am still using is jquery.timers-1.1.2. Okay! Let’s see how to create loop animation with jQuery timer plugin.

This is the loop animation effect:

The jQuery codes are very simple:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery Loop Animation Bouncing Ball</title>
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery.js" ></script>
<script type="text/javascript" src="jquery.timers.js" ></script>

<script type="text/javascript">

        // Bounce the basketball in every one second
        $("#basketball").everyTime(1000, function(){    

                // animate the basketball to the top in 0.6 seconds
                .animate({top:"0px"}, 600)
                // drop the basketball to the bottom in 0.4 seconds
                .animate({top:"184px"}, 400);




<h1>jQuery Bouncing Ball Animation</h1>

<div id="frame">
      <div id="basketball"></div>


It simply use the everyTime() function of the jQuery timer plugin to execute the animation in a set time delay in milli-seconds.

The animating position of the basketball can easily be controlled by checking the styles of the Div layers.

1. The basketball bounced to the top (zero distance from the top):

$(“#basketball”).animate({top:”0px”}, 600);

2. The basketball then dropped back to the bottom (184 pixels from the top):

$(“#basketball”).animate({top:”184px”}, 600);

This jQuery post discussed about loop animation with timer plugin.