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

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

提前谢谢。

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()文档 - 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);
}
);