jQuery的CSS背景位置動畫

我有一個奇怪的問題與jQuery和CSS;它似乎是一個jQuery的bug;我嘗試過搜索，但信息很難看。
有一張大照片作爲身體的背景;當我點擊一個按鈕時，我希望獲得一個簡單的jQuery動畫背景，從「底部」位置到「50％」位置。
那麼，如果我設置$("body").css("background-position", "center 50%");它的作品，但如果我嘗試使用animate() jQuery函數它不再工作。
那麼有可能以某種方式產生這種效果？
非常感謝你提前。jQuery的CSS背景位置動畫

來源

2010-11-02 bobighorus

我敢肯定，不可能使用animate()作爲相對值，因爲根據相關信息計算絕對位置並不容易。

嘗試使用像素值的所有方式。

來源

2010-11-02 12:11:02

好主意，但我怎樣才能計算出每個屏幕分辨率的75％或50％？嗯...... – bobighorus 2010-11-02 12:36:02

@bobighorus這正是爲什麼'animate（）'不這樣做:)儘管這應該可以通過'.height（）'/'.width（）'來實現。 – 2010-11-02 13:12:11

我試過使用像素值，但背景立即在頂部跳轉，並在右側移動50px！肯定是一個錯誤！ – bobighorus 2010-11-04 11:16:03

我會建議使用包含圖像（或有圖像作爲背景）的div和。動畫該div。從一個最小的情況開始，你只需要1格，絕對定位，並在格內img。然後在其上添加其他元素（較高的z-index）並獲得所需的外觀和行爲。

來源

2010-11-02 12:13:11

是的，這是一個想法，但我不喜歡添加不使用的標記......並且我不確定backgorund上的圖像是否會覆蓋每個分辨率頁面的全局區域... – bobighorus 2010-11-02 12:34:56

我試圖重新創建這個問題，但Pekka是一些東西...使用jQuery，你可以計算窗口的當前高度，減半，並使用該像素值設置背景位置。

來源

2010-11-02 12:13:33 Ben

jQuery的CSS背景位置動畫

回答

相關問題