將動畫添加到DOM中的新內容

我正在研究Web應用程序的前端。所有內容都是從我從後端收到的JSON對象生成的。然後我將這些內容封裝在HTML中並將其添加到DOM中。我使用jQuery append（）來做到這一點。一旦添加了內容，我就會將舊頁面和新頁面設置爲動畫。將動畫添加到DOM中的新內容

我的問題是內容在動畫開始之前似乎沒有完成加載。似乎並不是所有的CSS在動畫開始之前都會生效。它只在動畫完成時顯示。

我認爲我需要檢查內容是否完成添加之前，我開始動畫。我知道append（）應該是同步的，但是不能傷害到檢查。

下面是一段代碼片段，讓您瞭解涉及的動畫。（注意：這不是我的全部代碼，只是最低限度讓你知道我在做什麼）

'mainTransitionContainer'是新內容添加到的元素。
'transitionWidth'是使用舊頁面和新頁面的寬度確定的變量。
這兩個頁面都位於mainTransitionContainer內部，彼此相鄰。

$(mainTransitionContainer).append(newElement); 
$(mainTransitionContainer).ready(function() { 
    $(mainTransitionContainer).animate({ right: transitionWidth }, 2000,'easeInOutQuart'}); 
});

這是正確的方法來檢查內容加載完成？

有沒有人有另一種想法，爲什麼我的內容無法正確顯示？

jQuery動畫可能會影響我的CSS樣式嗎？

有沒有人有任何建議？非常感謝。

來源

2012-08-17 phunder

你如何加載的內容？ 'ready'事件只對'document'有效，因爲它將一個處理程序綁定到DOMReady事件，當您通過異步請求加載內容時不會觸發該事件。 – 2012-08-17 08:43:00

謝謝Didier。這已經澄清了一些事情。我編輯了原始代碼給你一個更好的主意。 'newElement'變量基本上是一個包含一些複雜HTML代碼的字符串。然後使用append（）將其添加到'mainTransitionContainer'。 – phunder 2012-08-17 08:50:29

* * newElement的內容是如何產生的？通過ajax加載或簡單地在JavaScript中建立？ – 2012-08-17 08:53:29

我已經意識到我犯了一個錯誤的其他地方。問題已解決。內容正被同步添加，因此內容完成追加時不需要觸發任何事件。

來源

2012-08-20 08:35:46 phunder

假設，如果您使用JSON加載數據，那麼您正在使用Ajax調用來檢索數據？

這裏不能真正使用.ready()函數。這會在最初加載頁面時觸發，無論之後會發生任何Ajax調用。它基本上觸發每當預期的元素空閒（即它已被更改，並且第一次更改完成且沒有代碼運行，觸發器將觸發）

我不知道你的ajax調用是如何構造的因爲我看到你的問題沒有任何片段，但是這是你應該以維持到什麼草圖「載，寫，然後進行動畫處理」的結構，你想：

$.ajax({ 

    url: "http://my.url.com", 

    type: 'get', //I assume. It could be 'post' dependent on what the code behind does. 

    cache: false, //for good measure. IE will never execute the same request twice, unless you put this in. 

    success: function(data_in_json_form) { 

     var data_in_html_form = .... //Do something with the received data_in_json_form. You need to end up with a string of valid html code. 

     $(mainTransitionContainer).append(data_in_html_form); 

     //Now you can do the animation. 
     $(mainTransitionContainer).animate({ right: transitionWidth }, 2000,'easeInOutQuart'}); 

    } 

});

需要記住的重要事情：

任何代碼不在'suc cess'函數將被執行而不需要ajaxt調用完成。 Ajax異步工作，因此瀏覽器啓動ajax請求，然後繼續進行而不等待響應。
追加同步工作。但是，當與Ajax調用結合使用時，請確保只在「成功」函數中執行代碼。
的.ready()觸發真的應該只用於$(document).ready()。它可能適用於其他情況，但它幾乎從來都不是問題的正確解決方案。

這是我讓你所描述的問題。如果我缺少一些東西，請發佈更多代碼，特別是您的JSON檢索方法以及其後的任何代碼。

來源

2012-08-17 09:47:12 Flater

將動畫添加到DOM中的新內容

回答

相關問題