중복 jQuery 코드를 개선하는 방법

Question

호버링 할 때 위/아래 슬라이드 효과를 만들기 위해 jQuery 스 니프가 있습니다. http://jsfiddle.net/jPneT/1/

지금 내가 그런 탐색이 : 나는이 바이올린으로 만들어

$(document).ready(function(){ 

      var height = $(".nav ul li").height(); 

      $('li:nth-child(5n+1)').mouseover(function(){ 
       $('li:nth-child(5n+1) .default').stop().animate({ 
        height: 0  
       }, height);       
      }).mouseout(function(){ 
       $('li:nth-child(5n+1) .default').stop().animate({ 
        height: height 
       }, height)  
      }); 
      $('li:nth-child(5n+2)').mouseover(function(){ 
       $('li:nth-child(5n+2) .default').stop().animate({ 
        height: 0  
       }, height);       
      }).mouseout(function(){ 
       $('li:nth-child(5n+2) .default').stop().animate({ 
        height: height 
       }, height)  
      }); 
      $('li:nth-child(5n+2)').mouseover(function(){ 
       $('li:nth-child(5n+2) .default').stop().animate({ 
        height: 0  
       }, height);       
      }).mouseout(function(){ 
       $('li:nth-child(5n+2) .default').stop().animate({ 
        height: height 
       }, height)  
      }); 
      $('li:nth-child(5n+2)').mouseover(function(){ 
       $('li:nth-child(5n+2) .default').stop().animate({ 
        height: 0  
       }, height);       
      }).mouseout(function(){ 
       $('li:nth-child(5n+1) .default').stop().animate({ 
        height: height 
       }, height)  
      }); 
      $('li:nth-child(5n+1)').mouseover(function(){ 
       $('li:nth-child(5n+1) .default').stop().animate({ 
        height: 0  
       }, height);       
      }).mouseout(function(){ 
       $('li:nth-child(5n+1) .default').stop().animate({ 
        height: height 
       }, height)  
      }); 

     }); 

:

<nav id="menu" class="nav">     
      <ul> 
       <li> 
        <a href="#"> 
         <div class="slide default"> 
          <span>About</span> 
         </div> 
         <div class="slide onhover"> 
          <span>About</span> 
         </div> 
        </a> 
       </li> 
       <li> 
        <a href="#"> 
         <div class="slide default"> 
          <span>Photography</span> 
         </div> 
         <div class="slide onhover"> 
          <span>Photography</span> 
         </div> 
        </a> 
       </li> 
       <li> 
        <a href="#"> 
         <div class="slide default"> 
          <span>Home</span> 
         </div> 
         <div class="slide onhover"> 
          <span>Home</span> 
         </div> 
        </a> 
       </li> 
       <li> 
        <a href="#"> 
         <div class="slide default"> 
          <span>Webdesign</span> 
         </div> 
         <div class="slide onhover"> 
          <span>Webdesign</span> 
         </div> 
        </a> 
       </li> 
       <li> 
        <a href="#"> 
         <div class="slide default"> 
          <span>Linkbase</span> 
         </div> 
         <div class="slide onhover"> 
          <span>Linkbase</span> 
         </div> 
        </a> 
       </li> 
      </ul> 
     </nav> 

가 바이올린에서 효과를 추가하려면를, 그와 같은 jQuery를 부분을 생성 그것은 잘 작동합니다. 그러나 jQuery 코드는 중복되고 길다. 그러나 그것을 더 작게 만들기 위해 개선 할 생각은 없습니다. 이 전환을 위해 jQuery를해야하므로

이 솔루션은

당신에게 몇 가지 아이디어를 가지고 ... 오래된 브라우저와 호환되어야 하는가?

Answer 1

나는 완전히 (때문에 모든 n 번째 자녀의) 코드를 이해하기 잘 모르겠지만, 나는 그런 짧은 될 수 있다고 생각 : 1로 이벤트의 수를 줄일 수 hover를 사용

$('li').hover(function(){ 
    $(this).find('.default').stop().animate({ 
     height: height  
    }, height);     
}, function(){ 
    $(this).find('.default').stop().animate({ 
     height: 0  
    }, height); 
}) 

. 첫 번째 첫 번째 기능은 마우스 입력과 같고 두 번째 기능은 마우스 출력입니다.

this을 사용하여 요소가 운반 된 것을 알 수 있습니다.