jQuery répéter des animations dans les fonctions

Question

J'ai une animation flash simple que j'essaye de reconstruire avec jQuery. J'ai 5 animations qui sont chaînées pour démarrer l'une après l'autre. Après que toutes les animations se soient déclenchées, j'en ai besoin pour faire une pause pendant 5 secondes, se libérer et recommencer l'animation. J'ai besoin de le faire indéfiniment. Voici mon code:

$(".bars").ready(function() { 
    $(".barone").animate({ 
     'height': '49px' 
    }, 2000, function() { 
     $(".bartwo").animate({ 
      'height': '112px' 
     }, 2000, function() { 
      $(".barthree").animate({ 
       'height': '174px' 
      }, 2000, function() { 
       $(".barfour").animate({ 
        'height': '236px' 
       }, 2000, function() { 
        $(".barfive").animate({ 
         'height': '298px' 
        }, 2000, function() { 
         $('.bars div').delay(5000, function() { 
          $('.bars div').css({ 
           "height": "0" 
          }); 
         }); 
        }); 
       }); 
      }); 
     }); 
    }); 
}); 

S'il vous plaît pardonnez ma mise en forme source, ce champ de texte n'est pas d'accord avec moi.

Vous pouvez également voir l'exemple à: http://execusite.com/fazio/files/careers-banner/test.html

Toute aide est grandement appréciée

Serait-ce correct alors?

animateThis fonction

() { $ (» bars div:. Nième enfant (1) "). Animent ({ 'height': '49px'}, 2000, function() { $ (" barres. div: nth-child (2) "). animate ({'height': '112px'}, 2000, function() { $ (". bars div: nth-enfant (3) "). animate ({' hauteur ':' 174px '}, 2000, function() { $. ("bars div. nième enfant (4)") animer ({ 'height': '236px'}, 2000, function() { $ ("barres div. nième enfant (5)"). animate ({ 'height': '298px'}, 2000, function() {
$ ('barres div') retard (2000).. css ({ "hauteur": "0"}), la fonction() {animateThis()}; }); }); });
}); }); } $ (".bar"). Ready (function() {animateThis()});

Je présente mes excuses pour mon ignorance, je suis un peu nouveau pour jQuery et en essayant toujours de saisir la syntaxe.

Answer 1

Placez votre code dans une fonction. lorsque la dernière animation se produit, éteignez la fonction à nouveau. Utilisez un .delay enchaîné (5000) pour une pause de 5 secondes

Code sudo:

function myAnimate(){ 
...your code.delay(5000).animate(....function(){ myAnimate() }) 
} 

Answer 2

J'intégrerait l'animation dans une fonction puis utilisez setInterval (FUNC, intervalle) de JavaScript.