0

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

4

1 回答 1

2

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

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

简而言之，$('#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()有关jquery.com api 参考部分的更多信息。

于 2012-08-28T03:30:54.847 回答