.hover（）onmouseout brake 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);
    }
    );

大家好， 我有图像8791px宽度，它是一个图像中的动画。一帧是149x85px。为了动画，我创建了上面的代码。我的问题是我不能在mouseout上制动循环并且动画剂量停止。任何想法我怎么能做到这一点？

提前谢谢。

Answer 1

尝试.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 2

您需要处理事件mouseenter和mouseleave。不要悬停。

Answer 3

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