我有一个页面,其中包含几个图像缩略图,它们的不透明度设置为 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 会导致缩略图多次动画?