jquery图像闪烁

Question

我有一个页面，其中包含几个图像缩略图，它们的不透明度设置为 0.6，直到鼠标悬停在它上面：然后，我将不透明度设置为 1.0，并显示一个带有视频标题的小型浮动 div光标。像这样……

CSS：

#theFloater { background-color: #444; color: #FFF; position: absolute; display: none; font-family: Arial, Helvetica, sans-serif; font-size: .85em; z-index:25;}
#reelList img { height: 20px; display: inline-block; margin: 0; z-index: 1}

jQuery：

$('#reelList li').hover(function(){
    $(this).find('img').animate({opacity: 1.0}, 200, function(){});
    $('#theFloater').html(theTitles[$(this).index()]);
    $('#theFloater').show();
}, function(){
    $(this).find('img').animate({opacity: 0.6}, 200, function(){});     
    $('#theFloater').hide();                            
});

var mouseX;
var mouseY;

$("a img").mousemove(function(e){
    mouseX = e.pageX;
    mouseY = e.pageY;
});

frameRate =  30;
timeInterval = Math.round( 1000 / frameRate );

atime = setInterval(function(){ 
    w = $('#theFloater').width() / 2;
    $('#theFloater').css('left', mouseX - w).css('top', mouseY - 35);
}, timeInterval);

这很好用，除非当光标退出缩略图时，有时，图像会连续几次上下动画不透明度，通常是两次或三次。如果我不显示浮动 div，它会完美运行。出于某种原因，浮动 div 与古怪有关。

有人知道为什么浮动 div 会导致缩略图多次动画吗？

Answer 1

我能够让它多次动画的唯一方法是打开鼠标，然后关闭，然后非常快速地重新打开几次然后停止 - 动画继续播放我进行切换的次数（准确的效果）。

我相信您正在寻找的是 jQuery 的 stop() 函数，该函数会停止当前动画（因此它们不会不断增加数量 - 每个新的动画调用都会在运行之前停止之前的动画）。

简而言之，用这个 jQuery 交换 $('#reelList li').hover 函数

$('#reelList li').hover(function(){
    $(this).find('img').stop().animate({opacity: 1.0}, 200, function(){});
    $('#theFloater').html(theTitles[$(this).index()]);
    $('#theFloater').show();
}, function(){
    $(this).find('img').stop().animate({opacity: 0.6}, 200, function(){});     
    $('#theFloater').hide();                            
});

有关stop() 的更多信息，请访问jquery.com api reference section。