JQuery Анимация при наведении

У меня есть текст, который я хочу оживить, когда на него наложена мышь например:

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

с этим.. когда мышь над строкой... столбец таблицы оживляет, немного двигаясь.

Проблема заключается в следующем: когда я перемещаю курсор мыши по этим строкам, а затем останавливаюсь и вижу. анимация продолжается некоторое время, даже если вы не наводите на нее мышь. ЭТО УДАЕТСЯ ПЕРЕДАТЬ СЕБЯ позже.

как я могу это остановить?

Ответ 1

Хорошо написанная статья о гладкой анимации jquery на зависании, которую я обнаружил, была этой Крисом Койером в CSS-трюках:

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

По сути, он проверяет, анимируется ли строка, а если нет, только тогда она вызывает анимацию mouseenter.

Надеемся, что ваши ряды теперь будут выглядеть как два последних примера на этой странице:

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

Ответ 2

Я получил это так, как я хотел... следующее изменение, которое я сделал "Анимировать ({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

Похоже, вы хотите привязать mousemove, а не зависание, но также создайте обработчик для мыши, например $(foo).mouseout(function(){$(this).stop();}), чтобы завершить анимацию.

Ответ 4

jQuery предоставляет специальные eventHandlers для ваших нужд:) используйте 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')
  });