Question

I have this line of code, but it doesn’t work, and I’m guessing that my function is the cause of the problem here. Here’s my JavaScript:

$(document).ready(function () {
    var interval;

    function move(ele) {
        $(ele).animate({
            'background-position-y': '0px'
        }, 200, function () {
            $(ele).animate({
                'background-position-y': '3px'
            }, 200, function () {
                interval = setTimeout(function () {
                    move(ele)
                }, 3);
            });
        });
    };
    $(".up").hover(function () {
        move(this), function () {
            clearTimeout(interval);
            interval = null;
            $(this).css("background-position", "80px 3px ");
        };
    });

Can someone explain me what I’m doing wrong here?

Answer 1

Even with the proper closing braces as suggested by David there is still a problem which keeps the animation going. Clearing the timer (interval) doesn’t stop the callback functions passed to .animate() from executing. So interval = setTimeout(...) will still get executed and perpetuated the animation cycle.

I reworked the code a bit for a working example, though there could be some improvements (like getting rid of a global variable). http://jsfiddle.net/aKKRk/