Сценарий анимации JQuery не работает сразу

Question

Я пытаюсь использовать сценарий jquery для эмуляции свойства перехода CSS3 для IE. Скрипт работает, но он не работает при первом наведении. При первом наведении это просто обычный наведение, которое меняет изображение, а не скрипт, и я не могу понять, почему. Любая помощь будет оценена по достоинству.

$(document).ready(function() { 
$("img").hover(function() { 
    $(this).stop().animate({opacity: "0"}, 'slow'); 
}, 
function() { 
    $(this).stop().animate({opacity: "1"}, 'slow'); 
}); 

});

Вот HTML

<ul id="gallery"> 

     <li class="engagement"> 
      <a 
       href="engagements.html" 
       style="background-image:url(Images/engagement2-small.jpg);" 
      > 
       <img 
        src="Images/engagement-small.jpg" 
        alt="Couple getting engaged" 
       /> 
       Engagement Photos 
      </a> 
     </li> 

     <li class="weddings"> 
      <a 
       href="weddings.html" 
       style="background-image:url(Images/wedding2-small.jpg);" 
      > 
       <img 
        src="Images/wedding-small.jpg" 
        alt="Couple at wedding" 
       /> 
       wedding photos 
      </a> 
     </li> 

     <li class="family"> 
      <a 
       href="family.html" 
       style="background-image:url(Images/family2-small.jpg);" 
      > 
       <img 
        src="Images/family-small.jpg" 
        alt="Young girl Posing for Family Photo" 
       /> 
       family photos 
      </a> 
     </li> 

     <li class="seniors"> 
      <a 
       href="senior.html" 
       style="background-image:url(Images/senior2-small.jpg);" 
      > 
       <img 
        src="Images/senior-small.jpg" 
        alt="Young Woman Posing for Yearbook Photo" 
       /> 
       senior portraits 
      </a> 
     </li> 

     <li class="corporate"> 
      <a 
       href="corporate.html" 
       style="background-image:url(Images/corporate2-small.jpg);" 
      > 
       <img 
        src="Images/corporate-small.jpg" 
        alt="Employees in Company Dresswear" 
       /> 
       corporate photos 
      </a>     
     </li> 

    </ul> 

А вот CSS хотя он не работает в IE

#gallery img { 
    border:1px solid #E4E3E2; 
    -moz-transition:opacity 0.5s ease-in-out; 
    -webkit-transition:opacity 0.5s ease-in-out; 
    -o-transition:opacity 0.5s ease-in-out; 
    -ms-transition:opacity 0.5s ease-in-out; 
    transition:opacity 0.5s ease-in-out; 
} 

#gallery a:focus img, 
#gallery a:hover img { 
    opacity:0; 
    -moz-opacity:0; 
    filter:alpha(opacity=0); 
} 

Answer 1

Это трудно понять, что вы делаете, не проявляя больше вашего код (независимо от того, осуществляете ли вы навигацию через Ajax и т. д.)

Вы можете попробовать:

$('.page-class').live("pageshow", function() { 
    // stuff 
}