JQuery 배경 애니메이션 - 이것이 올바른 방법인가요?

Question

내가 메뉴 LI에 따라 애니메이션 메뉴의 배경을 얻으려고

내가 가진 스크립트가 지금까지입니다 http://jsfiddle.net/d9LHV/70/

$(function() { 
    $('.top-nav ul li').mouseenter(function() { 
     var position = $(this).position() 
     $(this).parent().animate({ 
      'backgroundPosition': position.left}, {duration: 150}) 
    }) 
    .mouseout(function() { 
     $(this).parent().animate({}) 
    }) 
}); 

가 작동하는 것 같다하지만 뭔가가 jQuery를하지만 대한 오프 느낌 jQuery에 대한 경험이 없으므로 약간의 의견을 듣고 싶습니다.

.hover를 사용하거나 .mouseout 부분을 제거하면 애니메이션이 급격히 고르지 않게됩니다.

결과를 얻는 더 좋은 방법이 있습니까? 아니면 내 논리와 함께 뭔가가 떨어져 있기 때문에 내가 왜 원활하게 작동하도록 빈 mouseout가 필요 이해할 수 없기 때문에.

Answer 1

음이 얻는 이유 흠칫 고르지 때문에 같은 요소에 발사 여러 애니메이션 이벤트의 모든, 그 때문에 모두를 대기열에 넣고 차례대로 실행합니다. 당신이 할 수있는 일

는 다음과 같이, 다른 애니메이션을 시작하기 전에 .stop() 기능을 사용할 수 있습니다 :

$(function() { 
    $('.top-nav ul li').mouseenter(function() { 
     var position = $(this).position(); 
     $(this).parent().stop().animate({'backgroundPosition': position.left}, 150); 
    }); 
});​ 

데모 여기에 사용 :이 도움이 http://jsfiddle.net/pulkitm/d9LHV/71/

희망을!

Answer 2

나는 이런 식의 구조를 것 (세미콜론 포함) :

$(function() { 
    $('.top-nav ul li').mouseenter(function() { 
     var position = $(this).position(); 
     $(this).parent().animate({ 
      'backgroundPosition': position.left 
     }, 150); 
    }) 
    .mouseout(function() { 
     $(this).parent().animate(); 
    }) 
});​