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

回答

相关问题