Javascript 附加具有淡入效果的元素 [jQuery]
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4687579/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Append an element with fade in effect [jQuery]
提问by TIMEX
var html = "<div id='blah'>Hello stuff here</div>"
$("#mycontent").append(html).fadeIn(999);
This doesn't seem to work.
这似乎不起作用。
I just want a cool effect when the content gets appended.
当内容被附加时，我只想要一个很酷的效果。
Note: I want just the new "blah" div to fade in, not the entire "mycontent".
注意：我只想淡入新的“blah”div，而不是整个“mycontent”。
回答by icktoofay
$(html).hide().appendTo("#mycontent").fadeIn(1000);
回答by Pablo Fernandez
Adding a little more info:
添加更多信息：
jQuery implements "method chaining", which means you can chain method calls on the same element. In the first case:
jQuery 实现了“方法链接”，这意味着您可以在同一元素上链接方法调用。在第一种情况下：
$("#mycontent").append(html).fadeIn(999);
you would be applying the fadeIncall to the object which is target of the method chain, in this case #mycontent. Not what you want.
fadeIn在这种情况下，您会将调用应用于作为方法链目标的对象#mycontent。不是你想要的。
In @icktoofay's (great) answer you have:
在@icktoofay（很棒）的回答中，您有：
$(html).hide().appendTo("#mycontent").fadeIn(1000);
This basically means, create the html, set it as hidden by default, append it to #mycontentand thenfade it in. The target of the method chain now is hmtlinstead of #mycontent.
这基本上意味着，创建html，将其设置为默认隐藏，将其追加到#mycontent并然后褪色它英寸方法链的目标现在是hmtl代替#mycontent。
回答by Mohd Sakib
This also works
这也有效
$(Your_html).appendTo(".target").hide().fadeIn(300);
Regards
问候
回答by cristisst
since the fadeIn is a transition from hide to show, you'll have to hide the "html" element when you append it and then to show it.
由于淡入淡出是从隐藏到显示的过渡，因此您必须在附加“html”元素时隐藏它，然后再显示它。
var html = "<div id='blah'>Hello stuff here</div>"
$("#mycontent").append(function(){
return html.hide();
});
$('#blah').fadeIn(999);