動畫在一段時間後開始移動位置

我想創建一種幻燈片動畫。我的代碼在這裏：jsFiddle。動畫在一段時間後開始移動位置

這些平板電腦會旋轉。

問題是，在隨機時間，動畫將移出行。錯誤的平板電腦會經歷錯誤的動畫。以下是截圖：

When everything is fine

，這是它的外觀時，動畫出錯像

when the animation goes wrong

的主要問題是，我不明白爲什麼會動畫出問題隨機時間。在我的電腦中，它可以正常運行數小時，但在其他情況下（特別是在Safari上）。

來源

2012-02-07 Freeman Latif

你的jsfiddle有錯誤，從運行在所有停止它。 '未捕獲的TypeError：不能調用null的方法'位置'。 '未捕獲的ReferenceError：doit沒有定義' – Jasper 2012-02-07 23:20:36

我不太熟悉jsFiddle。請訪問www.nxgenlabs.co.uk查看實況樣本。 – 2012-02-10 11:51:16

我不確定你的意思是'在我的電腦裏它可以正常運行好幾個小時，但在其他情況下......「還有什麼其他情況？哪些瀏覽器行爲不當？ – Jasper 2012-02-10 18:26:32

你可以存儲每個動畫EL，然後在動畫回調設置這些值的預期最終的CSS值，所以對於每個動畫EL像

var el = $(selector); 

el.data("finalCSS", { your expected final CSS values }) 

$("selector").animate({animation properties}, function() { 
    el.css(el.data("finalCSS")).data("finalCSS", undefined); 
})

這不，首先要弄清楚爲什麼它的幫助發生（但我不能自己重新創建問題），但提供故障安全以確保佈局不會中斷;

來源

2012-02-13 14:20:57 wheresrhys

我相信這種情況發生在您嘗試在之前的動畫結束之前進行動畫製作。動畫前使用jQuery stop()。例如：

$('#animatingDiv').stop(false, true).animate({height:300}, 200, callback);

的第一個參數（假）將清空該元件和所述第二參數（真）上的動畫隊列將跳轉到當前動畫的末尾開始新的動畫之前。

來源

2012-02-08 00:10:30 Sandeep

我試了一下，但離開動畫過夜後，動畫仍然出錯。但在下一個動畫之前停止動畫是一個很好的建議。謝謝 – 2012-02-08 14:18:49

不幸的是，在jsFiddle上沒有任何工作示例，但我相信您爲動畫所做的計算出現了錯誤的值，隨着時間的推移這些值會變得很明顯。或者，你正在計算一個破壞整個幻燈片的錯誤。我可能錯了。如果沒有看到有效的樣本，不能幫上忙。 – Sandeep 2012-02-10 03:31:51

要觀看動畫，請訪問www.nxgenlabs.co.uk。我已經通過使用ajax重新加載div來實現臨時修復。我注意到，當我在其他頁面上瀏覽或運行其他應用程序時，動畫正在運行時，動畫出現錯誤的機率較高。我想你是對的，因爲時間流逝 – 2012-02-10 10:11:08

您正在將CSS位置設置爲十進制值。

img_w = $("#tablet"+num+" img").width(); 
    img_w = img_w *140/600; 
    img_h = $("#tablet"+num+" img").height(); 
    img_h = img_h *140 /600; 
    ... 
    var new_width = $(this).width() * 140/600; 
    $(this).css('width', new_width); 
    var new_height = $(this).height() * 140/600; 
    $(this).css('height', new_height);

您的分區可能會導致在不同瀏覽器中具有不同效果的十進制結果。子像素CSS定位可能會造成您的意外錯誤。

來源

2012-02-16 19:19:51

時，某個地方的動畫出現了錯誤，但這僅適用於圖像。這有可能會影響平板電腦的運動嗎？ – 2012-02-22 11:07:03

您可以用更少的代碼和更少的麻煩來做到這一點。在班

.tablet1{ 
    height:100px; 
    width:140px; 
    margin-left:-540px; 
    top: 200px; 
    z-index:10; 
}

2.使用普通函數來處理所有的過渡

1.商店平板電腦位置屬性。如果你使用switchClass

switchTabletsRight = function(){ var i, next, max = 5; for(i = 1; i <= max; i++){ next = (i < max)? i + 1 : 1; $(".tablet" + i).switchClass("tablet" + i, "tablet" + next); } };

這裏的概念證明的jsfiddle

JQuery用戶界面會爲你做所有的工作：http://jsfiddle.net/nRHag/4/

來源

2012-02-16 20:03:45 RSG

經過Firefox，Safari，Chrome和IE8/9的測試。 – RSG 2012-02-16 21:43:06

動畫在一段時間後開始移動位置

回答

相關問題