clearInterval在jQuery中停止悬停动画

时间:2014-01-13 20:17:58

标签: javascript jquery hover jquery-animate

我有以下fiddle

当我将鼠标悬停在上一个上面时,我希望它在移动时移动,当我停止徘徊时,我希望它停止。 请参阅下面的代码。当我停止悬停时警报有效,但clearInterval没有? 我在这里做错了什么?

    <div> <span id="prev">prev</span>

        <div class="scroll-container">
            <div class="img-container">
                <img src="http://dummyimage.com/100x100/000000/fff">
                <img src="http://dummyimage.com/100x100/f33636/fff">
                <img src="http://dummyimage.com/100x100/0c5b9e/fff">
                <img src="http://dummyimage.com/100x100/0c9e0c/fff">
            </div>
        </div>

    </div>

    var hoverInterval;
    function goLeft() {
        if (!$('.img-container').is(':animated')) {
            var first = $('.img-container img:first-child');
            var firstClone = first.clone();
            $('.img-container').append(firstClone);
            $('.img-container').animate({
                "left": "-=110px"
            }, "slow", function () {
                first.remove();
                $('.img-container').css("left", "0");
            });
        }
    }
    $('#prev').hover(

    function () {
        hoverInterval = setInterval(goLeft, 100);
    },
    function () {
        alert(1);
        clearInterval(goLeft);
    }
    );

1 个答案:

答案 0 :(得分:2)

将其更改为

clearInterval(hoverInterval);