Chanel’s Blog

I was just told to do some crazy animations involving multiple css attributes on multiple DOM objects. With jQuery and its animate method, this is fairly easy to do:

$(obj1).animate({height:10,width:32,margin:30,left:5});
$(obj2).animate({height:20,width:62,margin:20,left:45});
$(obj3).animate({height:30,width:92,margin:10,left:25});
$(obj4).animate({height:40,width:122,margin:00,left:23});

Well everything is not entirely prefect because each animation occurs within its own timer interval. If one animation is slighter more complex than the other, it forces the rest of the animations to wait. This problem compounds itself to create an “easing” affect where the animation appears exponentially instead of linearly. This is due to how browsers fail to isolate different javascript timers or tabs from affecting each other.

Now my quest is to find an animation plugin where you can animate multiple objects with their own parameters in a single animation timer interval to ensure smooth, linear animation. If I can’t find one, this might be my chance to finally submit something back to jQuery. It might look something like this:

$.animate([
    {obj: obj1, params:{height:10,width:32,margin:30,left:5}},
    {obj: obj2, params:{height:20,width:62,margin:20,left:45}},
    {obj: obj3, params:{height:30,width:92,margin:10,left:25}},
    {obj: obj4, params:{height:40,width:122,margin:00,left:23}}
]);

javascript, jquery animate, animation, attributes, css, dhtml, dom, html, interval, javascript, jquery, jquery javascript, timer interval, timers