用淡入效果添加一个元素 [jQuery]

Question

var html = "<div id='blah'>Hello stuff here</div>"

$("#mycontent").append(html).fadeIn(999);

这似乎不起作用。

我只希望在内容添加时有一个很酷的效果。

注意：我只想让新的“blah” div 淡入，而不是整个“mycontent”。

- TIMEX

---

可能是重复的问题：使用fadein和append。 - user

Answer 1

$(html).hide().appendTo("#mycontent").fadeIn(1000);

- icktoofay

---

我只想让新的“blah” div 淡入。 - TIMEX

@qwertymk：没有真正的理由。如果浏览器在DOM仍在被操作时进行渲染（据我所知，目前没有任何浏览器这样做），则在内容开始淡入之前就不会出现任何内容闪烁。再说一遍，这并不是真正重要的。 - icktoofay

我不是100%理解为什么这能够工作，但非常感谢。 - Jonesopolis

实际上，首先使用hide()（或等效方法）非常重要，因为fadeIn()不会在项目未隐藏/显示设置为none的情况下工作。请参见此jsFiddle。 - EF0

@ArthurTarasov：这会将“＃blah”附加到自身，这似乎不是您想要做的事情（我猜它被解释为无操作）。您可以放弃“.appendTo”部分并使用“$（'#mycontent'）.hide()。fadeIn（1000）”。 - icktoofay

Answer 2

补充一些信息：

jQuery实现了“方法链”，这意味着您可以在同一元素上链接方法调用。在第一个示例中：

$("#mycontent").append(html).fadeIn(999);

你需要将 fadeIn 方法应用于方法链的目标对象，即在此案例中是 #mycontent。这并不是你想要的。

在@icktoofay（很好的）回答中，你可以看到：

$(html).hide().appendTo("#mycontent").fadeIn(1000);

这基本上意味着，创建 html 元素，默认将其设置为隐藏状态，将其附加到 #mycontent 上，然后使其淡入。现在方法链的目标是 html 而不是 #mycontent。

- Pablo Fernandez

Answer 3

这也可以运行

$(Your_html).appendTo(".target").hide().fadeIn(300);

敬意

- Mohd Sakib

---

这是处理淡入最美观的方式，因为它允许HTML完全组合并创建所需的尺寸，然后再淡入。 - Antonio Nogueras

Answer 4

由于fadeIn是从隐藏到显示的过渡，所以在附加“html”元素时，您将不得不隐藏它，然后再显示它。

var html = "<div id='blah'>Hello stuff here</div>"

$("#mycontent").append(function(){
  return html.hide();
});

$('#blah').fadeIn(999);

- cristisst