Amélioration de cette animation jQuery continue

Question

Je viens de créer un simple bounce effect en jQuery mais je pense que le code n'est pas optimisé et que je cherche à l'améliorer.

var $square = $("#square"); 
bounce(); 
function bounce() { 
    $square.animate({ 
     top: "+=10" 
    }, 300, function() { 
     $square.animate({ 
      top: "-=10" 
     }, 300, function() { 
      bounce(); 
     }) 
    }); 
} 

$square.hover(function() {   
    jQuery.fx.off = true; 
}, function() { 
    jQuery.fx.off = false; 
}); 

Tout ce que je l'ai fait est essentiellement créé une animation qui ajoute 10 à la coordonnée supérieure de l'élément, et en fonction de rappel, je soustrayant 10 Coordonnée supérieure ..

Cela crée un effet de rebond (presque lisse) mais je pense qu'il peut être amélioré.

En outre, je veux arrêter l'animation sur mouseenter, et continuez sur mouseleave.

stop(true, true) n'a pas fonctionné, ni a fait dequeue() donc j'ai eu recours à tous les effets de tourner animation à l'aide de jQuery.fx.off = true (stupide, non?)

J'apprécierais des commentaires sur la façon dont cela peut être optimisé. Il s'agit d'un jsFiddle.

EDIT: Je viens de réaliser que jQuery a commencé à lancer des erreurs too much recursion lors de la désactivation et de la réactivation des effets.

Merci à l'avance,

Marko

Answer 1

S'il vous plaît essayez le code ci-dessous Démo: http://jsfiddle.net/LMXPX/

$(function() { 
    var $square = $("#square"),flag = -1; 
    var timer = bounce = null; 
    (bounce = function() { 
     timer = setInterval(function() { 
      flag = ~flag + 1; 
      $square.animate({ 
       top: "+="+(flag*10) 
      }, 300) 
     },300); 
    })();     
    $square.hover(function() {   
     clearInterval(timer); 
    }, function() { 
     bounce(); 
    }); 
}); 

Edit: Je suppose que dans votre code plusieurs fonctions de callback sont la raison de trop beaucoup de récursion

Answer 2

Pas beaucoup d'amélioration mais ici ' s ma tentative:

var $square = $("#square"); 

(function loop() { 
    $square 
     .animate({ top: "+=10" }, 300) 
     .animate({ top: "-=10" }, 300, loop); 
})(); 

$square.hover(function() { 
    $.fx.off = !$.fx.off; 
});