jQuery mouse hover 애니메이션 효과

Question

WordPress 웹 사이트에서 탐색 메뉴 요소에 마우스를 가져 가면 애니메이션 효과가 적용됩니다. 나는 다음과 같은 코드를 사용하여 작업을 완료하기 위해 관리했습니다 :

<!-- Marius was here :) --> 
<style type="text/css"> 
.fancy-img { 
    height: 51px; 
    background-image: url(http://www.minortest2.dk/wp-content/themes/bizway-childtheme/images/knap.png); 
    background-repeat: no-repeat; 
} 
.fancy-container { 
    padding-top: 10px; 
} 
.fancy { 
    position: absolute !important; 
    top: 0px; 
    z-index: -1; 
    overflow: hidden; 
} 
.container_24 .grid_sub_19 { 
    width: 83% !important; 
} 
</style> 
<script type="text/javascript"> 
jQuery('#menu-topmenu').append('<li class="fancy"><div class="fancy-container"><div class="fancy-img"></div></div></li>'); 
jQuery('.menu-item-11').hover(function() { 
    jQuery('.fancy').stop(); 
    jQuery('.fancy').css('width','107px'); 
    jQuery('.fancy-img').css('background-size','107px 33px'); 
    jQuery('.fancy').animate({ "left": "0px" }, 'fast'); 
    jQuery(this).children().css('color','#1c82e0'); 
    jQuery(this).siblings().children().css('color','#fff'); 
}) 
jQuery('.menu-item-20').hover(function() { 
    jQuery('.fancy').stop(); 
    jQuery('.fancy').css('width','141px'); 
    jQuery('.fancy-img').css('background-size','141px 33px'); 
    jQuery('.fancy').animate({ "left": "107px" }, 'fast'); 
    jQuery(this).children().css('color','#1c82e0'); 
    jQuery(this).siblings().children().css('color','#fff'); 
}) 
jQuery('.menu-item-36').hover(function() { 
    jQuery('.fancy').stop(); 
    jQuery('.fancy').css('width','155px'); 
    jQuery('.fancy-img').css('background-size','155px 33px'); 
    jQuery('.fancy').animate({ "left": "248px" }, 'fast'); 
    jQuery(this).children().css('color','#1c82e0'); 
    jQuery(this).siblings().children().css('color','#fff'); 
}) 
jQuery('.menu-item-37').hover(function() { 
    jQuery('.fancy').stop(); 
    jQuery('.fancy').css('width','107px'); 
    jQuery('.fancy-img').css('background-size','107px 33px'); 
    jQuery('.fancy').animate({ "left": "403px" }, 'fast'); 
    jQuery(this).children().css('color','#1c82e0'); 
    jQuery(this).siblings().children().css('color','#fff'); 
}) 
jQuery('.menu-item-38').hover(function() { 
    jQuery('.fancy').stop(); 
    jQuery('.fancy').css('width','111px'); 
    jQuery('.fancy-img').css('background-size','111px 33px'); 
    jQuery('.fancy').animate({ "left": "514px" }, 'fast'); 
    jQuery(this).children().css('color','#1c82e0'); 
    jQuery(this).siblings().children().css('color','#fff'); 
}) 
</script> 
<!-- Until here :D --> 

결과

는 here을 볼 수 있었다. 비록 내가 코드에 만족하지 않는다고 기대하고있는 것처럼 모든 것이 작동하고 있지만. 위의 그림과 같이 위치 값은 수동으로 설정됩니다. 새 요소가 메뉴에 추가되면 문제가 발생할 수 있습니다. 또한 제거하려는 코드가 중복되어 있습니다. 메뉴 항목은 공통 클래스가 menu-item, menu-item-type-post_type, menu-item-object-page과 같은 WordPress 웹 사이트입니다. 내 코드를 최적화하는 가장 좋은 방법은 무엇입니까? 모든 안내 또는 도움이 환영받는 것 이상입니다. 내 모범 사례 코드가 아니므로 유감스럽게 생각하지만 아직 몇 가지 기본 사항을 배우는 중입니다. :)

Answer 1

난 당신이 방금 들어, 공중 선회 요소의 폭 ($(this).width())와 부모의 상대적인 위치 같은 $(this).position().left

$('.menu-item').hover(function(){ 
$('.fancy').stop(); 
$('.fancy').css('width',$(this).width()+'px'); 
$('.fancy-img').css('background-size',$(this).width()+'px 33px'); 
$('.fancy').animate({ "left": $(this).position().left }, 'fast'); 
}); 

이 코드는 포함 할 수 있습니다 결함 정보에 액세스 할 수 $ (이) 셀렉터를 사용할 수있는 것 같아요 영감 :]

Answer 2

반복하는 코드를 함수에 넣고 그 함수를 필요한 매개 변수로 호출하는 것으로 시작할 수 있습니다. 깨끗한 코드를 작성하는 방법을 배우려면 DRY 원칙을 살펴보십시오. 또한 jQuery 대신 $를 사용할 수도 있습니다. 제 의견으로는 훨씬 깨끗해 보입니다.

HTML 요소를 한 번 가져 와서 변수에 넣을 수 있습니다. 나는 이것이 렌더링 시간을 절약 할 수 있다고 생각한다.