使用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元素的动画

回答

相关问题