jquery图像闪烁

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

CSS:

$('#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);

#字体{背景色：#444；颜色：#FFF；位置：绝对；显示：无；字体系列：Arial，Helvetica，无衬线；字体大小：.85em；z-index:25；}
#reelList img{高度：20px；显示：内联块；边距：0；z索引：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会使缩略图多次动画化吗？

我唯一能让它多次动画化的方法是先打开鼠标，然后关闭鼠标，然后再快速打开鼠标几次，然后停止——动画一直持续到我切换的次数（准确的效果）

我相信您正在寻找的是jQuery的

stop（）

函数，它可以停止当前动画（因此它们不会不断增加数量-每次新的动画调用都会在运行之前停止以前的动画）

简言之，交换

$（'#reelList li'）。将
函数悬停在这个jQuery中

$('#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（）
的更多信息，请参阅。
请包括html。和/或做一个jsfiddle我以前从未见过jsfiddle…我必须检查一下，但同时，这里有一个链接：+1您还可以链接
$（'#thefloter'）.html（标题[$（this.index（）））.show（）。事实上，
var$this=$（this）
甚至
$img=$this.find（'img'）也会提高速度和最小化：）非常感谢，但stop（）没有纠正它。（你可以在网站上看到它的更新）让它显示问题的最可预测的方法是非常快地将光标移入和移出中间缩略图，甚至不是多次。我正在查看你的JS（），它看起来好像
stop（）
根本不在你的代码中？也许你更新了？嗯，看起来我的网络连接有问题。在我确定.stop（）代码被上传后，它看起来终于起作用了。非常感谢你！