3つの画像が、jQueryを使用してアニメーションを表示します。

Question

私は、ホバリング時に、それぞれの画像をアニメーション化して別々の画像を表示する必要がある3つの画像を持っています。下のコードはその1つで動作しますが、同じ画像を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"); 
     }); 



    }); 

あなたが欲しい異なる画像のための3つのバリエーションを持っているあなたの.menu2 li emクラスを拡張し、または幅広いそれを維持するか、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

スタイルタグにbackground属性を明示的に指定します。また、jQueryを使ってイメージを変更することもできますが、これはスクリプトが動作するための依存関係を追加します。

（これは、それはあなたが変えるために探している background属性だと仮定しています）