Question

目前我正在使用click向after事件的页面添加元素。我希望以某种方式为此设置动画，以便新元素不会突然出现。

我不打算使用什么动画方法，只要它向用户显示点击时发生的事情。

我之前从未在jQuery中使用过动画，只是真正找到了使用现有DOM元素的示例。 应该使用什么模式来动画在jQuery中创建新元素？

Answer 1

您可以执行以下操作：

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

Answer 2

尝试这样的事情：

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

其中1000是项目可以淡入的速度。我将hide（）放在那里，假设新DOM元素在创建时可见，不确定是否需要。最好的办法是在创建新元素时在新元素上放置“display：none”，然后使用fadeIn（）。

你可以使用其他效果，例如slideUp / slideDown，所以你可能也想查看它们。

Answer 3

我过去所做的是在我要插入新元素的位置插入零大小的占位符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'处理程序，这些处理程序允许您在动画完成后启动动画的不同部分，因此实现所有这些功能并不是太过分。

此外，保留所有元素的JavaScript模型非常有用，而不是依赖于缓慢的DOM遍历和jQuery .data（）方法。

Answer 4

简单的fadeIn通常效果很好。

Answer 5

你可以去任何动画。您可以选择一个简单的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特效文档。

使用jQuery添加DOM元素的动画

5 个答案: