jquery - mouseenter、mouseleave 和覆盖

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/

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