Tutorials JavaScript Random jQuery Animation

Random jQuery Animation

This builds upon the last tutorial with jQuery functions. Today you can learn how to randomize numbers, animate object properties, and loop animations.

How does it work?

(function($) {    $.fn.myAnim = function() {        // Loop through objects    this.each(function() {            // Get three random numbers      var x = Math.round(1 + Math.floor(Math.random() * 500));      var y = Math.round(1 + Math.floor(Math.random() * 500));      var z = Math.round(1000 + Math.floor(Math.random() * 3000));            // Animate the object      $(this).stop(true,true).animate({        marginLeft: x,        marginTop: y      }, z, "swing",function() {        // Loop through it again        $(this).myAnim();      });          }); // End object loop        return this;      }  })(jQuery); 

How do I use this?

Put a few objects in your code and call it with the function name.

$("div").myAnim();

Demo

Why would I want this?

Some subtle movement on your site could spice it up.

That's all for this tutorial. See you all next time on PHP Trainee.

Posted by on . Category: JavaScript


Comments

No comments posted yet

You need to register or login to post new comments.