Jquery Animate на Hover

Question

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

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

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

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

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

Answer 1

Очень хорошо написанная статья о плавных анимациях jquery на hover, которую я обнаружил, была написана Крисом Койером для CSS Tricks:

http://css -tricks.com / полная JQuery-анимация /

Так что подгонка этого к вашему коду будет выглядеть так:

$(".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 / примеры / jQueryStop /

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

Answer 3

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

Answer 4

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