使用jQuery添加DOM元素的動畫

此刻，我使用after將元素添加到click事件的頁面上。我想以某種方式製作這些動畫，這樣新的元素就不會突然出現。使用jQuery添加DOM元素的動畫

我不會爲使用什麼動畫方法而煩惱，只要它向用戶展示他們點擊時發生了什麼。

我從來沒有在jQuery中使用過動畫，並且只能真正找到用於處理現有DOM元素的示例。 應該使用哪種模式來爲jQuery中的新元素創建動畫？

2009-10-26 Alex Angas

我過去所做的是在我要插入我的新元素的位置插入零大小的佔位符div。

然後，將該佔位符設置爲我想要的大小，然後插入一個隱藏的版本的元素，我想在佔位符內顯示並將其淡入視圖中。

一旦淡入完成我解開'佔位符刪除它，使用下面的代碼：

// Essentially, this does the opposite of jQuery.wrap. Here is an example: 
    // 
    //  jQuery('p').wrap('<div></div>'); 
    //  jQuery('p').parent().unwrap().remove(); 
    // 
    // Note that it is up to you to remove the wrapper-element after its 
    // childNodes have been moved up the DOM 
    jQuery.fn.unwrap = function() { 
     return this.each(function(){ 
      jQuery(this.childNodes).insertBefore(this); 
     }); 
    };

所有的jQuery動畫功能有「的onComplete」處理程序，允許你開球不同部分動畫完成後，所以實現所有這些並不是太麻煩。

此外，這是非常有用的保留所有的元素，而不是依靠緩慢的DOM遍歷和jQuery的。數據（）方法的一個JavaScript模型。

來源

2009-10-26 15:39:08 shuckster

我不知道這是否真的是我正在尋找的東西，但它似乎很酷，我不禁將它標記爲答案。 – 2010-01-13 05:43:52

一個簡單的fadeIn通常運作良好。

來源

2009-10-26 15:30:31 scunliffe

你可以這樣做：

...click(function() { 
    $(...).hide().appendTo(...).fadeIn(); 
}

來源

2009-10-26 15:32:49 googletorp

這對我來說非常完美，我可以很容易地創建一個元素......使其動畫......然後添加一個回調來刪除它。 – Orane 2015-05-05 03:01:04

嘗試是這樣的：

$("selector").hide().fadeIn(1000);

，其中1000是其中的項目可以淡化的速度，我把隱藏（）在那裏假設新的DOM元素在創建時是可見的，不確定是否需要它。最好的辦法是在創建它時在新元素上放置一個「display：none」，然後使用fadeIn（）。

您還可以使用其他效果，例如slideUp/slideDown，因此您可能也需要查看這些效果。

來源

2009-10-26 15:33:01

你可以去任何動畫。你可以去一個簡單的show

$("#element").show("slow") // or "normal" or "fast" 
// or 
$("#element").show(1000) // 1000 milliseconds

或者如先前建議，fadeIn。再次，您可以決定速度 - 如show。或者你可以去一個自定義動畫。

$("#element").animate({ 
    opacity: 1, // Will fade the object in 
    fontSize: "14px", // Will animate the font size too 
}, 1000); // 1000 milliseconds

轉到here爲jQuery效果文檔。

來源

2009-10-26 15:38:54

使用jQuery添加DOM元素的動畫

回答

相關問題