Улучшение этой непрерывной анимации jQuery

Question

Я только что создал простой, непрерывный эффект отскока в jQuery, но я чувствую, что код не так уж и оптимизирован, и я хочу его улучшить.

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

Все, что я сделал, в основном создал анимацию, которая добавляет +10 к верхней координате элемента, а в качестве функции обратного вызова я вычитаю 10 из верхней координаты.

Это создает (почти плавный) эффект отскока, но я чувствую, что его можно улучшить.

Кроме того, я хочу остановить анимацию на mouseenter, чтобы она продолжалась на mouseleave.

stop(true, true) не работал, как и dequeue(), поэтому я прибег к отключению всех эффектов анимации, используя jQuery.fx.off = true (глупо, нет?)

Буду признателен за любые отзывы о том, как это можно оптимизировать.

Вот вам jsFiddle .

РЕДАКТИРОВАТЬ: я только что понял, что jQuery начал выдавать too much recursion ошибок при отключении и повторном включении эффектов.

Заранее спасибо,

Marko

Answer 1

Пожалуйста, попробуйте следующий код Демо: 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();
    });
});

Редактировать: я полагаю, в вашем коде множество функций CallBack являются причиной слишком большой рекурсии

Answer 2

Не много улучшения, но вот моя попытка:

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

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

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

1004 *