附加具有淡入效果的元素[jQuery]

121

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

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

这似乎不起作用。

我只想在添加内容时产生酷炫的效果。

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

javascript jquery html css

— 天美时
source

使用淡入和追加的

— 用户

262

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

— 偷渡
source

1

我只希望新的“ blah” div消失

— 。– TIMEX

@TIMEX：这就是应该做的。

— icktoofay

先隐藏然后追加是有原因的（因为在附加到DOM之前先设置样式或类似方法会更快）还是没有区别？

— qwertymk 2011年

2

@qwertymk：没有真正的原因。如果浏览器曾经在仍在操作DOM的情况下渲染过（据我所知，目前还没有浏览器可以做到），那么在内容开始淡入之前就不会有任何闪烁。同样，这并不是很重要。

— icktoofay

1

@ArthurTarasov：这#blah是自身的补充，这似乎不是您想要执行的操作（而且我猜它被解释为“无操作”）。您不妨放下.appendTo零件并使用$('#mycontent').hide().fadeIn(1000)。

— icktoofay

52

添加更多信息：

jQuery实现了“方法链接”，这意味着您可以在同一元素上链接方法调用。在第一种情况下：

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

fadeIn在这种情况下，您会将调用应用于作为方法链目标的对象#mycontent。不是你想要的。

在@icktoofay的（最佳）答案中，您有：

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

这基本上意味着，创建html，将其设置为默认隐藏，将其追加到#mycontent并然后褪色它英寸方法链的目标现在是hmtl代替#mycontent。

— 帕勃罗·费尔南德斯（Pablo Fernandez）
source

18

这也有效

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

问候

— 莫赫德·萨基布（Mohd Sakib）
source

这是处理的，因为它允许的HTML被完全组成的衰落和衰落之前创建它需要的尺寸最美观的方法。

— 安东尼Nogueras

0

由于fadeIn是从hide到show的过渡，因此必须先添加“ html”元素，然后再添加它才能显示。

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

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

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

— 最先
source