jquery - マウスエンター、マウスリーブ、オーバーレイ

Question

バグはありませんが、この種の競合に対処するための最善のヒントを知りたいです。このループ効果を停止する方法。

ここに基本的な例があります: http://jsfiddle.net/aC5bV/

$('a').on({
  mouseenter:function(){
  $tooltip=$('#tooltip');
    $tooltip.animate({
        top:20,
        left:20
    },300);   
  },
  mouseleave:function(){
  $tooltip=$('#tooltip');
    $tooltip.animate({
        top:50,
        left:50
    },300);  
  }
});​

Answer 1

このループ効果を止めるには?

を使用し.stop()ます。最良の効果を得るには、パラメーターのマニュアルを確認してください。

jsFiddle デモ

$('a').on({
  mouseenter:function(){
    var $tooltip=$('#tooltip');
    $tooltip.stop().animate({
        top:20,
        left:20
    },300);   
  },
  mouseleave:function(){
    var $tooltip=$('#tooltip');
    $tooltip.stop().animate({
        top:50,
        left:50
    },300);  
  }
});​

また、var変数を定義するときに使用する必要があります。そうしないと、グローバル変数が取得されます。そして、それは全世界を破滅させ、子猫を殺します。

Answer 2

stop() 関数を使用する ...

    $('a').on({
  mouseenter:function(){
  $tooltip=$('#tooltip');
    $tooltip.stop().animate({
        top:20,
        left:20
    },300);   
  },
  mouseleave:function(){
  $tooltip=$('#tooltip');
    $tooltip.stop().animate({
        top:50,
        left:50
    },300);  
  }
});

Answer 3

最後に、私はこれを見つけました（ここから）

$(document).mouseover(function(e) {
    if (e.target == $("a").get(0) || e.target == $("#tt").get(0)) {
        $("#tt").animate({top:0,left:0},300);
    }
    else {
        $("#tt").stop().animate({top:200,left:200},300);
    }
});

http://jsfiddle.net/aC5bV/13/

これが改善可能であれば、私はより良い答えを受け入れます！