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()函数，它可以停止当前的动画（所以它们不会继续累积数字 - 每个新的动画调用都会在运行前停止以前的动画）。

简而言之，将$('#reelList li').hover函数与此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()上{{1}}的更多信息。

jquery图像闪烁

1 个答案: