jQuery動畫在Firefox和Chrome中平滑，但不是Safari 5

<!DOCTYPE html> 
<html> 
    <head> 
     <style> 
      .divs 
      { 
       width:900px; 
       height:599px; 
       border:solid 1px gray; 
       position:absolute; 
       top:0px; 
       left:0px; 
      } 
      #div_1 
      { 
       background:#fff url('../photos/home/Jun112010_5456.jpg') top left no-repeat; 
      } 
      #div_2 
      { 
       background:#fff url('../photos/home/_FRI2911.jpg') top left no-repeat; 
      } 
     </style> 
    </head> 
    <body> 
     <div id="div_2" class="divs"></div> 
     <div id="div_1" class="divs"></div> 
    </body> 
    <script language="JavaScript" src="../../site/c_side/jquery.js"></script> 
    <script language="JavaScript"> 
     $(function(){ 
      $("#div_1") 
       .animate({ 
        opacity : 0.0 
       }, 1000 , function(){ 
        $("#div_2").animate({ 
         opacity : 0.0 
        }, 1000) 
       }) 
     }); 
    </script> 
</html>

不透明度動畫在Firefox和Chrome中順利播放，但不是Safari 5？爲什麼這樣？ 我很欣賞提前的幫助。jQuery動畫在Firefox和Chrome中平滑，但不是Safari 5

來源

2011-04-07 Babiker

它可以在我的opera中正常工作5 – Sufendy 2011-04-07 02:25:12

是的，但不是Safari 5. – Babiker 2011-04-07 02:35:44

對不起，我的意思是Safari 5哈哈...是的，它可以正常工作（Windows XP上的Safari 5） – Sufendy 2011-04-07 02:39:16

不知道爲什麼，但您可以嘗試this jQuery plugin，它嘗試使用瀏覽器本機（CSS3）動畫進行某些轉換（包括不透明度）。

來源

2011-04-07 02:25:53 jdigital

不需要爲不透明度使用浮點值，它在Mac 5上的Safari 5中看起來相當平滑，我給您的盒子着色以示範，請看：http://jsfiddle.net/Gkfzd/1/。希望能幫助到你！

來源

2011-04-07 02:29:27 hoopyfrood

是的，顏色，但沒有圖像。 – Babiker 2011-04-07 02:46:28

想到兩個想法：要麼圖片的路徑設置不正確，要麼圖片太大，動畫會在圖片加載完成之前觸發。我用這些測試成功：http://jsfiddle.net/Gkfzd/2/。也許使用'setTimeout'並稍後觸發衰落或縮小圖像... – hoopyfrood 2011-04-07 03:04:51

jQuery動畫在Firefox和Chrome中平滑，但不是Safari 5

回答

相關問題