鼠标悬停在 div 上时如何使用 setInterval 继续动画答案

【问题标题】：how to use setInterval to continue animation while mouse is over div鼠标悬停在 div 上时如何使用 setInterval 继续动画
【发布时间】：2013-09-11 06:52:29
【问题描述】：

我正在尝试修改幻灯片以在鼠标位于后退或下一个箭头上时连续动画。如果鼠标离开，我希望动画在原处停止。

我发现this post 和this post 有助于告诉我我需要使用setInterval，但是因为我是初学者，所以我不确定如何使用我拥有的代码来实现它。我尝试更新在 counter 变量中设置的毫秒数，但这并没有改变任何东西。

这是目前为止的悬停代码。它在悬停时推进图像，但不是连续推进。

        $(document).ready(function(){
        var thumbs = $('ul.thumbHolder li');
        var bigImgs = $('ul.imgHolder li');
        var mask = $('.imgHolder');
        var imgW = $('ul.imgHolder li').width();
        var speed = 800;

        thumbs.removeClass('selected').first().addClass('selected');

        thumbs.click(function () {
        var target = $(this).index();

        mask.animate({
        'left': '-' + imgW * target + 'px'
        }, speed);


        thumbs.removeClass('selected');
        $(this).addClass('selected');
        });


        $('.Bleft').on('mouseover', function () {
            var i = $('ul.thumbHolder li.selected').index();
            i--;

            $('ul.thumbHolder li.selected').removeClass('selected');
            thumbs.eq(i).addClass('selected');

            if (i === -1) {
                mask.animate({
                    'left': '-' + imgW * $('ul.thumbHolder li').index() + 'px'
                }, speed);
            } else {
                mask.animate({
                    'left': '-' + imgW * i + 'px'
                }, speed);
            }
            clearInterval(counter);
        });

        $('.Bright').on('mouseover', function () {
        var i = $('ul.thumbHolder li.selected').index();
        i = i >= thumbs.length - 1 ? 0 : i + 1;

        $('ul.thumbHolder li.selected').removeClass('selected');
        thumbs.eq(i).addClass('selected');

        mask.animate({
        'left': '-' + imgW * i + 'px'
        }, speed);
        clearInterval(counter);
        });
        var count = 0;
        var counter = window.setInterval(timer, 5000);

        function timer() {
        count = count + 0;
        if (count >= 0) {
        count = 0;
        return;
        }
        mask.animate({
        'left': '-' + imgW * count + 'px'
        }, speed);
        thumbs.removeClass('selected');
        thumbs.eq(count).addClass('selected');
        }

        });

This is an example of what I am trying to achieve（我知道它是 flash 但我认为它也可以用 jQuery 完成）。

This is a fiddle that has all my work so far.

感谢您的帮助。

【问题讨论】：

标签： javascript jquery css animation setinterval

【解决方案1】：

我想我已经接近解决方案了。这是我的想法。每个ul.imgHolder li被分割成许多20px的块（当然你可以改变大小），所以如果一个div的大小为980px，你将有49个块用于图像。

当 mouseover 事件被触发时，我会每隔 speed 毫秒滑动一个块，直到 mouseout 被触发。

我只实现了滑动右键，我已经部分删除了一些逻辑，对不起！

var $ = jQuery.noConflict(true);
$(document).ready(function(){
var thumbs = $('ul.thumbHolder li');
var bigImgs = $('ul.imgHolder li');
var mask = $('.imgHolder');
var imgW = $('ul.imgHolder li').width(); //Assuming imgW % 20 = 0
var blockSize = 20; //20px
var blocksPerThumb = imgW/blockSize;
var numBlocks = (blocksPerThumb)*thumbs.length;
var speed = 400;
var blockPos = 0;
var currentAnim = null;

thumbs.removeClass('selected').first().addClass('selected');

thumbs.click(function () {
    var target = $(this).index();

    mask.animate({
        'left': '-' + imgW * target + 'px'
    }, speed,'linear');


    thumbs.removeClass('selected');
    $(this).addClass('selected');
});


$('.Bleft').on('mouseover', function () {

});

$('.Bright').on('mouseover', function(){
    currentAnim = setInterval(goRight,speed);
}).mouseout(function(){
    clearInterval(currentAnim);
});

var goRight =  function () {
    blockPos = (blockPos+1)%numBlocks;

    mask.animate({
        'left': '-' + blockSize * blockPos + 'px'
    }, speed,'linear');

};

});

干得好！

【讨论】：