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);

これはうまく機能しますが、カーソルがサムネイルから出たときを除いて、画像は不透明度を連続して数回、通常は 2 回または 3 回上下にアニメーション化します。フローター div を表示しない場合は、完全に機能します。なんらかの理由で、フローター div が奇妙なことに関係しています。

floater div によってサムネイルが複数回アニメーション化される理由を知っている人はいますか?

4

1 に答える 1

2

複数回アニメーション化することができた唯一の方法は、マウスをオンにしてからオフにしてからオンに戻し、数回非常に速く動かしてから停止することでした-アニメーションは、切り替えた回数だけ動き続けました（正確な効果）。

あなたが探しているのはstop()、現在のアニメーションを停止する jQuery の関数だと思います (そのため、アニメーションが増え続けないようにします。新しいアニメーションを呼び出すたびに、実行前に以前のアニメーションが停止します)。

要するに、$('#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();                            
});

jquery.com api reference sectionstop()で、さらに詳しい情報が得られます。

于 2012-08-28T03:30:54.847 に答える