jQuery custom animation

jQuery and animation

The most common type of dynamic effect we'll want to perform is the simple show or hide element(s). This is all fine, but jQuery is capable of more complex type animations. In this tutorial we will create more complex (but in essence simple) animation that will show you common usage of animate() jQuery method.

I like to provide complete runnable example for completeness reason, so you can download it from my google code repository.

Basic animations

Before we start we will quickly show common jQuery animation method and their usage. The methods for showing and hiding elements are show() and hide. Using this methods, jQuery change HTML elements style.display property.

We use this methods like so:

$("h1").hide(); //This will hide all h1 elements.
  $("h1").show(); //This will show all h1 elements.

Simple as that! Also jQuery support toggling the display state of elements between revealed and hidden by providing us toggle method.

$("div").toggle(); 

There is bit more to these methods than simple show/hide. When called with no parameters, these methods effect a simple manipulation of the display state of the wrapped elements. But when passed parameters, these effects can be animated so that the changes in display status of the affected elements take place over a period of time.

For example for following code:

$("h1").hide("slow");

will specify the duration of the effect and element will fade out slow. We can also use integer values here (these represent milliseconds). There are also predefined methods for this kind of fade in fade out effects: fadeIn(), fadeOut(), fadeTo(). We can use also slideDown(), slideUp() methods for gradually decreasing vertical size of element and thus remove it from display.

jQuery complex animation

Number of core effect method coming with jQuery is small. This should not be considered as jQuery handicap, because using jQuery animate() method writing our own animation is quite simple if you have rudimentary knowledge of CSS.

jQuery animate(properties, duration) method applies an animation as specified by properties. These properties are object hash that specifies the values that supported CSS style should reach at the end of the animation. The animation takes place by adjusting the values of the style properties from current value for element to the value for an element to the value specified in this object hash. duration optionally specifies the duration of the effect (same as in other simple methods).

Let see example:

$(function() {
   $("img[alt='arrow']").click(function(event) {
      var ball = $(this);                    
      var SCALE = 3;
      ball.animate(
      {                       
        opacity: 'hide',
        width: ball.width()* SCALE,
        height: ball.height() * SCALE
      },
      'fast');
       ball.animate({ opacity : 'show'}, 'fast');
       ball.animate({ top : '+=300'}, 4000);
       ball.animate({ left : '+=600'}, 4000);
       ball.animate({ top : '-=300'}, 4000);
       ball.animate(
       {
         left : '-=600',
         width: '80px',
         height: '80px'
       },
       4000);
   });
});

This example is simple to follow:
We have single image element in our DOM and we first (after user click on in) grab it's instance and named it "ball", then we hide use animate method (lines 5-10) to scale it by factor of 3 and fade it out. Then we show it (line 12), this will cause additional effect (some kind of blinking). Then we move ball into square (lines 13-22) and in the end we will revert ball's size in the same time we move it (lines 16-22).
You can see that we also use integer value for animation duration.

This is no complete tutorial and this animations method can be additionally configured by passing more parameters (like callback functions) and easing function (for animate method), but for this short example this was not necessary.

Here is ball animation in action: