jQuery Loop Animation with Timer Plugin

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:

<head>
<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">
      $(document).ready(function(){

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

                 $("#basketball")
                // 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);

          });

       });
</script>

</head>
<body>

<h1>jQuery Bouncing Ball Animation</h1>

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

</body>
</html>

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.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>