當用戶放大或縮小時，Chrome瀏覽器/ Safari瀏覽器的jQuery動畫效果不佳

我想向我們的幾位設計師展示jQuery中的動畫快速模型，特別是可以創建一個物體移動到另一個物體下。當用戶放大或縮小時，Chrome瀏覽器/ Safari瀏覽器的jQuery動畫效果不佳

我設置的例子有一張100美元的鈔票，在透明的紙張下方移動，並撕下一個洞。這兩個元素都設置爲絕對定位，並且紙張.png具有更高的z-索引。

一切似乎工作正常，但我注意到在Chrome和Safari中放大或縮小拋出定位。

我已經張貼在這裏的例子：

http://tdm-analytics.com/js/examples/example-1.html

你會發現，如果你放大或縮小，並刷新，垂直定位是關閉的。

的代碼是在這裏：

<!DOCTYPE html> 
<head> 
    <script type="text/javascript" src="http://tdm-analytics.com/js/examples/jquery-1.4.4.js"></script> 
    <script> 
     $(document).ready(function() { 
      $("#100").animate({"top":"-=610px"}, 3000); 
     }); 
    </script> 
</head> 
<body> 
    <div id="envelope" style="position:absolute;margin-right:-195px;right:50%;top:200px;z-index:9999;"> 
     <img src="http://tdm-analytics.com/js/examples/bkhtornframe.png" /> 
    </div> 
    <div id="100" style="position:absolute;margin-right:-190px;right:50%;top:630px;z-index:1;"> 
     <img src="http://tdm-analytics.com/js/examples/100-dollar-bill.jpg" /> 
    </div> 
</body> 
</html>

不知道這是否是我做錯了或一個jQuery的問題。如果有人知道修補程序，我將非常感謝幫助。

來源

2010-11-23 damzam

我已經看到這種情況發生了許多冷卻jQuery的/的JavaScript/CSS動畫。我知道沒有簡單的解決方法。 – Fred 2010-11-23 08:16:30

我可以看到chrome中的動畫沒有問題。因爲它和web工具一樣，所以沒有嘗試Safari。

或者您是否在引用放大時出現在證書屏幕分辨率上的瀏覽器滾動條？

來源

2010-12-29 02:41:46 Anders

如果放大或縮小並刷新，則會拋出垂直定位。 – damzam 2010-12-29 16:02:39

使用空間，例如margin_left到水平動畫，當鉻/ Safari瀏覽器[和其他人]中放大其中的工作原理。

來源

2012-05-01 13:38:39 justacoder

當用戶放大或縮小時，Chrome瀏覽器/ Safari瀏覽器的jQuery動畫效果不佳

回答

相關問題