web-dev-qa-db-ja.com

ホバー時のJQuery Animate

マウスを上に置いたときにアニメーション化したいテキストがあります。例：

$(".tabb tr").hover(
  function(){
    $(this).find("td #headie").animate({marginLeft:'9px'},'slow')
  },
  function() {
    $(this).find("td #headie").animate({marginLeft:'0px'},'slow')
  });

これで..行の上にマウスを置いているとき..テーブルの列は少し移動することでアニメーション化します。

ここでの問題は、これらの行の上でマウスカーソルを繰り返し移動してから停止して表示すると、マウスを移動していなくてもアニメーションがしばらく続きます。 ITは後で移動します。

どうすれば止められますか？

jqueryanimationhover
18
Deepak

ホバー上のスムーズなjqueryアニメーションに関する非常によく書かれた記事は、CSS TricksのChris Coyierによる次の記事でした。

http://css-tricks.com/full-jquery-animations/

これをコードに合わせると、次のようになります。

$(".tabb tr").hover(
function(){
  $(this).filter(':not(:animated)').animate({
     marginLeft:'9px'
  },'slow');
// This only fires if the row is not undergoing an animation when you mouseover it
},
function() {
  $(this).animate({
     marginLeft:'0px'
  },'slow');
});

基本的には、行がアニメーション化されているかどうかを確認し、アニメーション化されていない場合は、マウスエンターアニメーションを呼び出します。

うまくいけば、行はこのページの最後の2つの例のようにいくらかアニメーション化されます。

http://css-tricks.com/examples/jQueryStop/

34
Max G J Panas

思い通りに手に入れました。以下は、「animate（{marginLeft： '0px'}、0）」に加えた変更です。

以下のコードを確認してください。

$(document).ready(function(){
    $(".tabb tr").mouseover(function(){ $(this).find("td #headie").animate({marginLeft:'9px'},'fast') });
    $(".tabb tr").mouseout(function(){ $(this).find("td #headie").animate({marginLeft:'0px'},0) });
});
3
Deepak

jQueryは必要に応じて特別なeventHandlerを提供します:) mouseenterおよびmouseleaveを使用します

$(".tabb tr").mouseenter(
  function(){
    $(this).find("td #headie").animate({marginLeft:'9px'},'slow')
  });
$(".tabb tr").mouseleave(
  function() {
    $(this).find("td #headie").animate({marginLeft:'0px'},'slow')
  });
1
1b0t

ホバーではなくマウスムーブにバインドするだけでなく、$(foo).mouseout(function(){$(this).stop();})のようなマウスアウトのハンドラーを作成して、アニメーションを終了します。

1
annakata