我想为 appendChild() 设置动画，使其淡入答案

【问题标题】：I want to animate the appendChild() , so that it fades in我想为 appendChild() 设置动画，使其淡入
【发布时间】：2013-12-19 05:11:02
【问题描述】：

您好，我想将淡入效果添加到使用 appendChild() 显示的 chrome 插件中。

我想要类似的东西，

    document.body.appendChild(div).fadeIn(1000);

他们有办法这样做吗？

【问题讨论】：

标签： javascript jquery html css dom

【解决方案1】：

fadeIn() 方法由 jQuery 提供 - 假设 div 是一个 dom 元素引用，您需要为其获取 jQuery 包装器，然后调用fadeIn

var div = document.createElement('div');
...
document.body.appendChild(div);
$(div).hide().fadeIn(1000);

甚至可以写成

var div = document.createElement('div');
...
$(div).hide().appendTo(document.body).fadeIn(1000);

【讨论】：

【解决方案2】：

fadeIn() 是 jQuery 方法，而不是 DOM 方法，因此您需要在 jQuery 对象上调用它，而不是 DOM 对象。此外，您可能希望在添加之前隐藏元素，如下所示：

// assumes you already have an element to append in a variable named div
div.style.display = "none";
document.body.appendChild(div);
$(div).fadeIn(1000);

或者，使用更多的jQuery，它可能是这样的：

$(div).hide().appendTo(document.body).fadeIn(1000);

【讨论】：

它给出了 Uncaught ReferenceError: $ is not defined
@CleanX - 如果您要使用 jQuery，那么您必须在页面中包含 jQuery 脚本。 $ 在此上下文中是一个 jQuery 符号。如果它没有被定义，那么你可能没有在你的页面中包含 jQuery。
我已经添加了 jquery 脚本，它仍然说同样的话。
@CleanX - 符号 $ 由 jQuery 定义。如果该符号未定义，则 jQuery 未正确加载或某些东西未定义该符号。如果没有看到您的实际页面，我真的无能为力。

【解决方案3】：

请尝试使用此代码

$('<div class="someelement"/>').appendTo('body');
$('.someelement').fadeIn();

【讨论】：