Проблемы с jQuery и IE7

Question

Я использую эффект «fly through» на моем сайте. Как this - Горизонтальный эффект.

Сценарий работает в IE8,9, FF и Chrome. Когда в IE7 у меня есть несколько элементов на странице. Оба имеют одинаковый идентификатор. Наведите указатель мыши на первый элемент страницы, он загружается. Наведение на другое, и это вообще не работает. Не имеет для меня никакого смысла.

Мой код выглядит следующим образом:

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}); 
     }); 
    }); 

Кто-нибудь знает причины, почему один будет работать в 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> 

т.е. у вас может быть столько, сколько хотите .... тогда вы можете это сделать:

$(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 
     }); 
    }); 
}); 

в селекторов JQuery . является префиксом для классов вместо # для id с