Question

我有一堆我从YouTube上带来的图片，我希望顶部图片在悬停时淡出，然后开始播放下3张图片的旋转幻灯片。我差点搞定了，但是当我将鼠标悬停在缩略图上时，我遇到了阻止SetInterval停止的问题。

thumbRotate: function(){} //This is up in the main object

//hover state over thumbs and slideshow animation       
$('#youtube-widget ul a').hover(
    // hover-in
    function(){
        $this = $(this);

        $(this).children('.title-overlay').children('h5, img, span').stop(true, true).animate({opacity: '0'}, 200, function() {
            $.Modules.VideoWidget.thumbRotate = setInterval(function() { 
                var topImage = $this.children('img:first');
                topImage.stop(true, true).fadeOut(500).next().stop(true, true).fadeIn(500).end().appendTo($this);
            }, 2000);
        });
    //hover-out 
    }, function() {
        clearInterval($.Modules.VideoWidget.thumbRotate);
        $(this).children('.title-overlay').children('h5, img, span').stop(true, true).animate({opacity: '1'}, 200);
    }
);

编辑：我注意到悬停在缩略图上似乎是以指数方式增加动画。出于某种原因，动画似乎堆积在自己身上，但我真的不明白为什么。

Answer 1

我认为这是你的变量名称的问题。它在这里工作：

我刚添加了这个并在两个时间间隔中使用它

var hoverInterval;

http://jsfiddle.net/b3Mb8/

Answer 2

这是问题 - .hover（）和.mouseover（）...... 这两个函数不仅在光标进入元素时执行动作，而且每当鼠标移动元素内的单个像素时也执行动作。换句话说，这两个函数对于更简单的交互很有用，但是必须使用.mouseenter（）和mouseleave（）来设置区间函数，否则每次光标在元素内移动时都会设置一个新的区间（可以是很多）。

新小提琴 - http://jsfiddle.net/b3Mb8/2/ 新代码 -

//thumb rotate animation on hover
function startRotate($this) {
    $.Modules.VideoWidget.thumbRotate = setInterval ( function() { 
        topImage = $this.children('img').filter(":first");
        topImage.animate({opacity: '0'}, 500).next().animate({opacity: '1'}, 500).end().appendTo($this);                                        
    }, 800);
}
function stopRotate() {
    clearInterval($.Modules.VideoWidget.thumbRotate);
}

$("#youtube-widget ul a").mouseenter(function() {               
    $this = $(this);
    startRotate($this);                     
}).mouseleave(function() {              
    stopRotate();               
});

//hover state over thumbs and slideshow animation       
$('#youtube-widget ul a').hover( function(){
    $this.children('.title-overlay').children('h5, img, span').stop(true, true).animate({opacity: '0'}, 300, function() {
    });
//hover-out 
}, function() {
    $this.children('.title-overlay').children('h5, img, span').stop(true, true).animate({opacity: '1'}, 300);
});

如何让这个SetInterval在停留时停止？

2 个答案: