mouseenter，mouseleave和overlay

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 Demo

$('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，否则you get a global variable。那dooms the whole world并杀死了小猫。

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

最后，我发现了这个（来自here）

$(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/

如果这是可以改进的，我会接受更好的答案！