Esta melhoria contínua jQuery animação

Question

Acabei de criar um simples, contínuo rejeição efeito em jQuery, mas eu sinto que o código não é otimizado e estou olhando para melhorá-lo.

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;
});

Tudo o que eu tenho feito é basicamente criou uma animação que adiciona +10 para o topo de coordenadas do elemento, e como uma função de retorno de chamada, eu estou subtraindo 10 do topo de coordenadas..

Isso cria uma (quase suave) de rejeição efeito, mas eu sinto que pode ser melhorado.

Além disso, quero parar a animação em mouseenter, e que ele continue no mouseleave.

stop(true, true) não funcionou, nem dequeue() então recorri a viragem todos os efeitos de animação fora de usar jQuery.fx.off = true (stupid, não?)

Eu apreciaria qualquer feedback sobre como isso pode ser otimizado.

Aqui está um jsFiddle.

EDITAR:Eu só percebi que o jQuery possui começou a atirar too much recursion erros ao desabilitar e habilitar novamente os efeitos.

Obrigado antecipadamente,

Marko

Answer 1

Por favor, tente a demonstração abaixo do código: 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: Eu acho que no seu código várias funções de retorno de chamada são o motivo de muita recursão

Answer 2

Não muito de uma melhoria, mas aqui vai a minha tentativa:

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

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

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

​