animation Jquery boucle

Question

Je suis en train de faire cette boucle d'animation

$(".jquery_bounce").ready(function(){ 
     $("img", this).animate({ marginLeft : '20px' } , { 
       duration: 200, 
       complete:function() { 
        $(this).animate({ marginLeft : '0px' } , { 
        duration: 200, 
        easing: 'easeInCubic', 
        }); 
       } 
      }); 
    }) 
}); 
    <div class="example"> 
       <h4>Bounce</h4> 
      <div class="jquery_bounce bounce"> 
      <img src="images/bounceimg.png" class="bounceimg" /> 
      </div> 
    </div> 

S'il vous plaît aider.

Answer 1

essayer cette ~

$(function(){ 
    $.extend({ 
    show:function(){ 
    $(".jquery_bounce").ready(function(){ 
     $("img", this).animate({ marginLeft : '20px' } , { 
       duration: 200, 
       complete:function() { 
        $(this).animate({ marginLeft : '0px' } , { 
       specialEasing: { 
        left: 'swing', 
        top: 'easeOutBounce' 
       } 
      }); 
       } 
      }); 
    }) 
    } 
}); 
    setInterval("$.show()",1000); 
}); 

Démo:

http://jsfiddle.net/VpKw2/

Answer 2

Pourquoi n'utilisez-vous pas setInterval()?

Edit:

Votre animation rebondisse une fois, puis s'arrête, parce que ...

1. Vous déclenchez la marge = 20 partie.
2. Une fois l'intégralité terminée, une autre animation est planifiée: marge = 0.
3. C'est tout. Il ne boucle pas car rien n'est reprogrammé après la première passe.

Lisez la documentation sur setInterval(): c'est une fonction qui vous permet d'appeler une autre fonction à intervalles fixes (en millisecondes).

Si vous voulez toujours le faire comme ci-dessus, vous devez corriger le problème que j'ai signalé. Essayez de penser à votre façon de le contourner, et je vais vous aider si vous ne pouvez pas comprendre :).

Cheers.

Answer 3

Configuration d'une fonction bounce qui continuera l'animation, soit déplacer l'élément gauche ou à droite:

function bounce(elm, leftZero) { 
    var px = leftZero ? '0px' : '20px'; 
    elm.animate({ marginLeft : px}, { 
     duration: 200, 
     complete:function(){ 
      //Continue bouncing 
      setTimeout(function(){ 
       bounce(elm, !left); 
      },1); 
     } 
    }); 
} 

$(".jquery_bounce").ready(function(){ 
     $("img", this).each(function(){ 
      //Start bouncing 
      bounce($(this), false); 
     }); 
    }) 
});