3 개의 이미지가 jQuery를 사용하여 애니메이션으로 넘어갑니다.

Question

3 개의 이미지가 있습니다. 마우스를 가져 가면 각각의 이미지에 애니메이션이 적용된 별도의 이미지가 표시됩니다. 아래 코드는 그 중 하나에서 작동하지만 동일한 이미지를 세 번 보여 주며 동일한 호버 이미지도 호출합니다.

각 이미지에 3 개의 개별 이미지를 애니메이션으로 만드는 가장 좋은 방법은 무엇이라고 생각하십니까?

CSS

.menu2 { 
    padding: 0; 
    list-style: none; 
} 
.menu2 li { 
    float: left; 
    position: relative; 
} 
.menu2 a { 
    display: block; 
    width: 218px; 
    height:181px; 
    background: url(images/btn_off.png) no-repeat center center; 
} 
.menu2 li em { 
    background: url(images/btn_txt.png) no-repeat; 
    width: 218px; 
    height: 88px; 
    position: absolute; 
    top:200px; 
    left: 0; 
    z-index: 2; 
    display: none; 
} 

jQuery를

$(document).ready(function(){ 

     $(".menu2 a").hover(function() { 
      $(this).next("em").animate({opacity: "show", top: "180"}, "slow"); 
     }, function() { 
      $(this).next("em").animate({opacity: "hide", top: "200"}, "fast"); 
     }); 



    }); 

HTML

 <ul class="menu2"> 
      <li> 
       <a href="#"></a>   
       <em></em> 
      </li> 
      <li> 
       <a href="#"></a> 
       <em></em> 
      </li> 
      <li> 
       <a href="#"></a> 
       <em></em> 
      </li> 
     </ul> 

Answer 1

당신은 당신이 원하는 다른 이미지의 세 가지 변형이 있거나 광범위한을 유지하기 위해 .menu2 li em 클래스를 확장 할 수 있습니다 스타일 태그에 background 속성을 명시 적으로 지정하십시오. jQuery를 사용하여 이미지를 수정할 수도 있지만, 스크립트에 대한 종속성이 추가됩니다.

(이 그것이 background 당신이 변경 찾고 속성의 가정한다)