LA.NET [EN]

Aug 14

In the previous posts, we’ve met several methods which run some predefined animations. Instead of trying to add methods for all possible animations, JQuery has decided to introduce a helper function which you can reuse for animating several css properties (notice that you can only animate properties which expect numeric values).

Currently, there are two “overloads” of the animate method:

animate(props, duration, easing, callback)
animate(props, options)

As you can see, there are a lot of things going on here:

  • props is an anonymous object which indicate the css properties that should be animated and their final values. It’s possible to use em or % as units and you can even use relative animations by passing –= or += to decrement or increment the current value of the specified css property;
  • duration is used for defining the duration of the animation. It’s an optional parameter and, in 1.3, if you set it to 0, JQuery will synchronously set the elements to their end state. Before you ask,the answer is yes,you can also use the magic strings we’ve met in the past (slow, normal and fast);
  • easing indicates the name of a previously registered function for performing the easing. According to the docs, there are two predefined easing functions: “linear” and “swing”;
  • callback references a callback function which will be called for each of the elements when the animation ends;
  • options is used on the second “overload” and it expects an anonymous object for setting the animation. Currently, you can define values for duration, easing, complete, step (method reference which will be called for each step of the animation) and queue (boolean value which indicates if the animation should be queued or started immediately).

There are some properties which probably deserve additional info. Easing influences the processing of frames and relies on mathematical calculations. I’m not really into this stuff, so I’ll leave further investigation of it to you :)

If you use the “overload” which uses the options object, then you’ll also be able to decide if animations should be run in parallel. By default, animations are run synchronously, that is, if you call animate several times, one animation will only start after the other has finished (don’t confuse calling animate several times with animating several properties at once in a single animate call). If you’d like to run an animation at the time of invocation, then you’ll need to set the options’ queue property to false.

I’m sorry, but I’m not really into design and effects, so I guess that the sample code for this post we’ll have to be even dumber than the ones I’ve presented in the  past. Take a look at the following code which animates an existing paragraph:

<p id="paragraph">This is a paragraph</p>
<input type="button" value="Move and grow" id="bt" />
<script type="text/javascript">
    $(function() {
        $("input").click(function() {
            $("p").css("position", "relative")
                  .css("backgroundColor", "green")
                  .animate( {left:100,
                                    width: "-=20%",
                                    height: 300
                                    },
                                    200);
                });
    });
</script>

Clicking the button kicks off a series of custom animations. We start by moving the P element so that it stays 100px left of the original position. Then, we decrease its current height by 20% and set its height in 300px. The whole thing should run in 200 ms.

I’ll change the previous example slightly in order to show you how you could kick several. Take a look at the following code:

<script type="text/javascript">
    $(function() {
        $("input").click(function() {
            $("p").css("position", "relative")
                  .css("backgroundColor", "green")
            //.animate({ left: 100 }, 100)
                  .animate({
                      left: 100,
                      width: 300
                  },
                    5000)
                .animate({
                        height: 100
                    },
                    {
                        duration: 5000,
                        queue: false
                    });
        });
    });
</script>

Try changing the value of queue property and see what happens. Since I’ve set the animation to 5 seconds, it should be enough for understanding what’s going on.

And that’s it! Keep tuned for more on JQuery!

3 comments so far

  1. Mirigothien
    5:01 am - 10-11-2009

    Great site. Keep doing.,

  2. Ethardocien
    9:39 am - 10-12-2009

    I want to say – thank you for this!,