Home > javascript, jquery > jQuery: Syncronising Multiple Objects and Animations

jQuery: Syncronising Multiple Objects and Animations

September 2nd, 2008
Goto comments Leave a comment

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}}
]);
I Love Social Bookmarking
SubscribeDiggdel.icio.usStumbleUpon

javascript, jquery , , , , , , , , , , , ,

  1. Drone
    April 1st, 2009 at 15:53 | #1
    Reply | Quote

    Hello,

    I’m searching for the same thing, did you found something?

    Cheers!

  2. Simone
    April 6th, 2010 at 16:37 | #2
    Reply | Quote

    Javascript is not multi threaded, so while one function is execution, no other function is. No matter how many intervals you use, one or one thousand, if one takes X time to execute other will wait, and if it is only one doing something, the rest will wait until that something is finished.

    So, you will never find a way to do multiple animations running concurrently because javascript cannot run concurrently.

    However, even in much more sophisticated languages, and in most modern OS and GUIs, only one thread can modify (paint) the same window at the same time, so even there you canno thave more threads moving things without having one wait for the other at same point.

  3. chanel
    April 6th, 2010 at 18:31 | #3
    Reply | Quote

    I was mainly trying to optimize how jQuery specifically implemented multiple animations in concert. I was attempting to update all the objects in one iteration instead of each object implementing changes separately from each other. I chose to use my initial, default solution b/c at the time, certain browsers had trouble smoothly displaying the animations using the 2nd solution.

  4. david
    June 28th, 2010 at 09:54 | #4
    Reply | Quote

    Hi,

    found this post on google, searching for a solution like that.
    There is a way to solve that, but sadly a bit different:
    (Do you hava any bbcode here? …)

    [CODE]
    $(‘dummyelement’).attr({ ‘to’: 10 });
    $(‘dummyelement’).animate(
    {
    to: 100
    }, {
    duration: 1500,
    step: function(step) {
    elOne.css({ left: step });
    elTwo.css({ left: step });
    }
    }
    );
    [/CODE]

    So you can count a unknwon value each step on a dummy element and set multiple transfotms on multiple elements/objects every frame with the step-callback.
    I used the simple 0-100 loops and calculated with percentage operations each step.

    so based on that it will be easy to improve the jQuery.animate method with a plugin.

  1. No trackbacks yet.