jquery animate child elements each at different speed

Question

I am using jquery animate function to move a block in my content div. The basic structure is as follows:

<div class="content">
  <div>block 1</div>
  <div>block 2</div>
  <div>block 3</div>
</div>

My js:

//main menu clicked:    
    $('#nav').children().click(function(e){
        e.preventDefault();
        var current = $('.selected').index();
        var clicked = $(this).index();
        if(current != clicked){

        if (current < clicked) {
            clickedLeft = 1400
            currentLeft = -1400
            $('#content-'+clicked).css('left', clickedLeft);
        } else {
                clickedLeft = -1400
                currentLeft = 1400
                $('#content-'+clicked).css('left', clickedLeft);
            }

        $('#content-'+current).animate({left: currentLeft}, 1500, 'easeInOutSine', function(){ $('#content-'+current).hide(); });
        $('#content-'+clicked).show().animate({left: 0}, 1500, 'easeInOutSine');


        }
    });

When I click particular menu link, corresponding div will move to the center and div which is in the center will move to opposite. Everything working fine but my block has different elements like img p li etc., so I want to move those elements at different speed. Is it possible? or should I animate each elements of blocks separately? I cannot give animate to each of the elements because they are retrieved from db, so not always the same elements show up.

Live example: dida.uz

Answering your question. Yes, it's possible to animate with the same code. What have you tried ? — Ricardo Alvaro Lohmann, Jan 08 '13 at 20:16
Yes, use a different .animate for each child element with a different speed. — Kevin B, Jan 08 '13 at 20:17

score 0 · Answer 1 · answered Jan 08 '13 at 20:17

You should assign different animations to divs, but previously, must compute the required amount of animation in limited time, that will give you the correct speed, then all of animations will end in same time, resulting best experience.

Of course, example code will be appreciated.

jquery animate child elements each at different speed

1 Answers1