JQuery動畫腳本不能馬上工作

-1

我想用jquery腳本來模擬IE的CSS3轉換屬性。該腳本有效，但在第一次懸停時不起作用。在第一次懸停時，它只是一個常規的懸停改變圖片，而不是腳本，我不明白爲什麼。任何幫助，將不勝感激。JQuery動畫腳本不能馬上工作

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

來源

2012-03-16 Bryan

在此發佈相關代碼或jsFiddle示例。如果可以避免，請不要鏈接到您的網站。 – j08691 2012-03-16 18:39:43

你能詳細說明你的意思嗎？定期懸停改變圖片而不是腳本？ – 2012-03-16 18:57:18

發生的事情是，您第一次將鼠標懸停在圖像上，而不是平滑的jquery效果，圖像淡出圖像時，圖像快速消失。這就好像該腳本在第一次將鼠標懸停在圖像上時不起作用。不知道如何解釋它。 – Bryan 2012-03-16 20:13:00

很難知道你在做什麼，沒有表現出更多的你代碼（無論你是通過Ajax等導航）

你可以嘗試使用：

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

來源

2012-03-16 19:05:26 Gareth

問題在於： '#gallery a：focus img， #gallery a：hover img { opacity：0; -moz-opacity：0; filter：alpha（opacity = 0）; }' – Bryan 2012-03-17 01:08:17

JQuery動畫腳本不能馬上工作

回答

相關問題