【发布时间】：2010-12-03 23:01:56
【问题描述】：
如何将.append() 与show('slow') 之类的效果一起使用
对append 产生影响似乎根本不起作用，它给出的结果与普通show() 相同。没有过渡，没有动画。
如何将一个 div 附加到另一个 div 上，并对其产生 slideDown 或 show('slow') 效果？
【问题讨论】：
标签： jquery animation append effects show
【发布时间】：2010-12-03 23:01:56
【问题描述】：
对追加的影响将不起作用，因为浏览器显示的内容会在追加 div 后立即更新。因此，结合 Mark B 和 Steerpike 的答案：
在实际附加之前将要附加的 div 设置为隐藏。您可以使用内联或外部 CSS 脚本来完成，或者只是将 div 创建为
<div id="new_div" style="display: none;"> ... </div>
然后您可以将效果链接到您的附加 (demo)：
$('#new_div').appendTo('#original_div').show('slow');
或（demo）：
var $new = $('#new_div');
$('#original_div').append($new);
$new.show('slow');
【讨论】：
-
可能是内联样式，添加了一个类似于“隐藏”的css类，相当于显示：none is ..“classier”（baddoom tsh）;）
-
这行不通。当您使用 append 时，它将返回 original_div 而不是新附加的元素。所以你实际上是在容器上调用 show。
-
@Vic 碰巧
.append()甚至没有选择器字符串。不过这个想法还是正确的。谢谢，已更新。 -
演示完美运行，但它假定内容存在 - 因此如果您正在生成内容，它将无法工作，例如。拉取图像的 alt 内容以创建标题或 div...
本质是这样的：
- 您在父级上调用“附加”
- 但您想对新孩子调用“显示”
这对我有用：
var new_item = $('<p>hello</p>').hide();
parent.append(new_item);
new_item.show('normal');
或：
$('<p>hello</p>').hide().appendTo(parent).show('normal');
【讨论】：
-
这两种方法我都试过了，还是不行。附加内容没有平滑的滑动效果。
-
'normal'不是一个适合速度的字符串。将其留空以表示没有过渡（立即显示）。使用字符串'fast'200ms 或'slow'600ms。或输入任何数字，如@987654327@ (= 747ms) 来定义自己的速度。查看docs 并查找动画/持续时间。 -
带幻灯片效果：
element.slideUp("slow", function(){ element.appendTo(parent).hide(); element.slideDown(); }); -
我喜欢将隐藏部分保留在模板之外
处理传入数据的另一种方式（例如来自 ajax 调用）：
var new_div = $(data).hide();
$('#old_div').append(new_div);
new_div.slideDown();
【讨论】：
类似：
$('#test').append('<div id="newdiv">Hello</div>').hide().show('slow');
应该这样做吗？
编辑：抱歉，代码错误，也采纳了马特的建议。
【讨论】：
-
不确定这是否能达到他想要的效果，但如果是这样，你会链接这些功能：
$('#divid').append('#newdiv').hide().show('slow')。 -
它确实有效； #newdiv 位是错误的，你是对的，你可以链接它们。我现在已经编辑了我的答案。
-
这是最好的答案一行干净，做它应该做的。
当您附加到 div 时，隐藏它并显示它并使用参数"slow"。
$("#img_container").append(first_div).hide().show('slow');
【讨论】：
-
隐藏和显示事件适用于#img_container 而不是first_div，您应该使用appendTo
通过cssvisibility:hidden将附加的div设置为初始隐藏。
【讨论】：
我需要类似的解决方案，想在 facebook 之类的墙上添加数据，发布时，使用 prepend() 在顶部添加最新帖子，认为可能对其他人有用..
$("#statusupdate").submit( function () {
$.post(
'ajax.php',
$(this).serialize(),
function(data){
$("#box").prepend($(data).fadeIn('slow'));
$("#status").val('');
}
);
event.preventDefault();
});
ajax.php 中的代码是
if (isset($_POST))
{
$feed = $_POST['feed'];
echo "<p id=\"result\" style=\"width:200px;height:50px;background-color:lightgray;display:none;\">$feed</p>";
}
【讨论】：
你为什么不简单地隐藏、附加、然后显示，像这样：
<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>
【讨论】：
我在我的最终项目中有这个确切的需求，我在元素后面添加了样式display: none; 并为其添加了一个 id。在JQuery的第二行，我添加了$('#myid').show('slow');。
$(document).on('click','#trigger',function(){
$('#container').append("<label id='newLabel' style='display:none;' class='btn btn-light'>New Element</label>");
$('#newLabel').show('slow');
});<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div id="container" class="btn-group">
<label class="btn btn-light">Old element</label>
</div>
<button id="trigger" class="btn btn-info">Click to see effect</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>【讨论】：
如果您使用动画，可以显示平滑。 在样式中只需添加“动画：显示 1s”，整个外观在关键帧中描述。
【讨论】：
就我而言：
$("div.which-stores-content").append("<div class="content">Content</div>);
$("div.content").hide().show("fast");
您可以使用 visibility:hidden -> visibility:visible 调整您的 css 并调整过渡等 transition: visibility 1.0s;
【讨论】：