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

Наконец, я нашел, что это (от 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/

Если это улучшаемый, я буду принимать лучше ответ !

Answer 2

Как остановить этот эффект цикла?

.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 3

использование стоп-функция() ...

$('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); 
    } 
});