jquery animer des éléments enfant chacun à une vitesse différente

Question

J'utilise la fonction jquery animate pour déplacer un bloc dans mon contenu div. La structure de base est la suivante:

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

Mes 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'); 


     } 
    }); 

Lorsque je clique sur le lien de menu particulier, div correspondant se déplacera au centre et div qui est au centre se déplacera à face . Tout fonctionne bien, mais mon bloc a différents éléments comme img p li etc, donc je veux déplacer ces éléments à une vitesse différente. Est-ce possible? ou devrais-je animer chaque élément de blocs séparément? Je ne peux pas donner d'animation à chacun des éléments car ils sont récupérés à partir de db, donc pas toujours les mêmes éléments apparaissent.

Un exemple concret: dida.uz

Answer 1

Vous devez assigner des animations différentes à divs, mais auparavant, il faut calculer la quantité requise d'animation en temps limité, qui vous donnera la vitesse correcte, toutes les animations se termineront en même temps, résultant de la meilleure expérience.

Bien sûr, un exemple de code sera apprécié.