.hover() onmouseout breake for(){}

Question

$('#drugiGumb').hover(
    function () {
        for (var i = 0; i < 60; i++) {
            $('#drugiGumbSlika').delay(15).animate({ marginLeft: '-=149px' }, 1);
        }
        $('#drugiGumbSlika').animate({ marginLeft: '-8791px' }, 1);
    }, function () {
        $('#drugiGumbSlika').stop().animate({ marginLeft: '0px' }, 1);
    }
    );

Hi All, i have image 8791px width and its is animation in one image. one frame is 149x85px. To animate it i create code above. My problem is that i cant brake for loop on mouseout and the animation dosent stop. Any ideas how can i accomplish this?

Thx in advance.

Answer 1

jQuery .stop() docs - http://api.jquery.com/stop/

$('#drugiGumb').hover(
function () {
    for (var i = 0; i < 60; i++) {
        $('#drugiGumbSlika').delay(15).animate({ marginLeft: '-=149px' }, 1);
    }
    $('#drugiGumbSlika').animate({ marginLeft: '-8791px' }, 1);
}, function () {
    $('#drugiGumbSlika').stop(true, true).animate({ marginLeft: '0px' }, 1);
}
);

Answer 2

Try .stop(true,true)

$('#drugiGumb').hover(function () {
    for (var i = 0; i < 60; i++) {
        $('#drugiGumbSlika').delay(15).animate({
            marginLeft: '-=149px'
        }, 1);
    }
    $('#drugiGumbSlika').animate({
        marginLeft: '-8791px'
    }, 1);
}, function () {
    $('#drugiGumbSlika').stop(true,true).animate({
        marginLeft: '0px'
    }, 1);
});

Answer 3

You need to handle the events mouseenter and mouseleave. Not hover.