jQueryとIE7のIDの問題

Question

私は自分のサイトに「飛び越えて」効果を使用しています。 Like this - 水平効果。

スクリプトはIE8,9、FF、Chromeで治療を受けます。 IE7では、ページに複数の要素があります。どちらも同じIDです。ページの最初の項目にカーソルを合わせると、ロードされます。他のものを乗り越えると、まったく動作しません。私にとっては意味がない。

次のように私のコードは次のとおりです。

HTML

<div style="margin-bottom:30px;" id="takealook-sub"> 
      <a href="#"> 
       <img style="left: -200px;" alt="" src="path/to/image"> 
      </a> 
</div> 

jQueryの

$(function(){ 
     $("#takealook-sub a").hover(function(){ 
      $("img", this).stop().animate({left:"0px"},{queue:false,duration:600}); 
     }, function() { 
      $("img", this).stop().animate({left:"-200px"},{queue:false,duration:600}); 
     }); 
    }); 

誰にも1がIE7でうまくいく理由を知っているのではなく、他の？私が言うように、他のすべてのブラウザではすべてがうまくいくようです。

おかげ

Answer 1

あなたはがは、単一のドキュメント上の重複id秒を持つことはできません....クラスを使用する代わりに、class ... see the v4.0.1 HTML specs hereとv5 HTML specs here

例を使用します。

<div style="margin-bottom:30px;" class="takealook-sub"> 
    <a href="#"> 
     <img style="left: -200px;" alt="" src="path/to/image"> 
    </a> 
</div> 
<div style="margin-bottom:30px;" class="takealook-sub"> 
    <a href="#"> 
     <img style="left: -200px;" alt="" src="path/to/image"> 
    </a> 
</div> 

を

あなたは好きなだけ多くを持つことができます。これを行うことができます：

jQueryのセレクタ .で

$(function() { 
    $(".takealook-sub a").hover(function() { 
     $("img", this).stop().animate({ 
      left: "0px" 
     }, { 
      queue: false, 
      duration: 600 
     }); 
    }, function() { 
     $("img", this).stop().animate({ 
      left: "-200px" 
     }, { 
      queue: false, 
      duration: 600 
     }); 
    }); 
}); 

代わりid S