jQuery 使用附加效果
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1520178/
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
jQuery using append with effects
提问by David King
How can I use .append()with effects like show('slow')
我如何使用.append()类似的效果show('slow')
Having effects on appenddoesn't seem to work at all, and it give the same result as normal show(). No transitions, no animations.
对 on 的影响append似乎根本不起作用，它给出的结果与 normal 相同show()。没有过渡，没有动画。
How can I append one div to another, and have a slideDownor show('slow')effect on it?
如何将一个 div 附加到另一个 div 并对其产生slideDown或show('slow')影响？
回答by Matt Ball
Having effects on append won't work because the content the browser displays is updated as soon as the div is appended. So, to combine Mark B's and Steerpike's answers:
对 append 产生影响将不起作用，因为浏览器显示的内容会在 div 附加后立即更新。因此，结合 Mark B 和 Steerpike 的答案：
Style the div you're appending as hidden before you actually append it. You can do it with inline or external CSS script, or just create the div as
在实际附加之前，将要附加的 div 设置为隐藏样式。您可以使用内联或外部 CSS 脚本来完成，也可以将 div 创建为
<div id="new_div" style="display: none;"> ... </div>
Thenyou can chain effects to your append (demo):
然后您可以将效果链接到您的 append ( demo)：
$('#new_div').appendTo('#original_div').show('slow');
Or (demo):
或（演示）：
var $new = $('#new_div');
$('#original_div').append($new);
$new.show('slow');
回答by Derek Illchuk
The essence is this:
本质是这样的：
- You're calling 'append' on the parent
- but you want to call 'show' on the new child
- 您正在对父级调用“附加”
- 但你想在新孩子上调用“show”
This works for me:
这对我有用：
var new_item = $('<p>hello</p>').hide();
parent.append(new_item);
new_item.show('normal');
or:
或者：
$('<p>hello</p>').hide().appendTo(parent).show('normal');
回答by naspinski
Another way when working with incoming data (like from an ajax call):
处理传入数据时的另一种方式（例如来自 ajax 调用）：
var new_div = $(data).hide();
$('#old_div').append(new_div);
new_div.slideDown();
回答by Mark Bell
Something like:
就像是：
$('#test').append('<div id="newdiv">Hello</div>').hide().show('slow');
should do it?
应该做吗？
Edit: sorry, mistake in code and took Matt's suggestion on board too.
编辑：抱歉，代码有误，也采纳了马特的建议。
回答by Mark Bell
When you append to the div, hide itand show itwith the argument "slow".
当您附加到 div 时，隐藏它并使用参数显示它"slow"。
$("#img_container").append(first_div).hide().show('slow');
回答by Steerpike
Set the appended div to be hidden initially through css visibility:hidden.
最初通过 css 将附加的 div 设置为隐藏visibility:hidden。
回答by Karthik Sekar
I was in need of a similar kind of solution, wanted to add data on a wall like facebook, when posted,use prepend()to add the latest post on top, thought might be useful for others..
我需要一种类似的解决方案，想在像facebook这样的墙上添加数据，发布时，用于prepend()在顶部添加最新帖子，认为可能对其他人有用..
$("#statusupdate").submit( function () {
$.post(
'ajax.php',
$(this).serialize(),
function(data){
$("#box").prepend($(data).fadeIn('slow'));
$("#status").val('');
}
);
event.preventDefault();
});
the code in ajax.php is
ajax.php 中的代码是
if (isset($_POST))
{
$feed = $_POST['feed'];
echo "<p id=\"result\" style=\"width:200px;height:50px;background-color:lightgray;display:none;\">$feed</p>";
}
回答by Megamind Saiko
Why don't you simply hide, append, then show, like this:
你为什么不简单地隐藏，附加，然后显示，像这样：
<div id="parent1" style=" width: 300px; height: 300px; background-color: yellow;">
<div id="child" style=" width: 100px; height: 100px; background-color: red;"></div>
</div>
<div id="parent2" style=" width: 300px; height: 300px; background-color: green;">
</div>
<input id="mybutton" type="button" value="move">
<script>
$("#mybutton").click(function(){
$('#child').hide(1000, function(){
$('#parent2').append($('#child'));
$('#child').show(1000);
});
});
</script>
回答by NeedHate
It is possible to show smooth if you use Animation. In style just add "animation: show 1s" and the whole appearance discribe in keyframes.
如果使用动画，则可以显示平滑。在样式中只需添加“动画：显示 1s”，整个外观在关键帧中进行描述。
回答by The Bumpaster
In my case:
就我而言：
$("div.which-stores-content").append("<div class="content">Content</div>);
$("div.content").hide().show("fast");
you can adjust your css with visibility:hidden -> visibility:visible and adjust the transitions etc transition: visibility 1.0s;
您可以使用可见性：隐藏 -> 可见性：可见并调整过渡等过渡：可见性1.0s；
