使用 append with effect 的 jQuery

如何使用 .append()与效果像 show('slow')

对 append产生影响似乎根本不起作用，它给出了与正常 show()相同的结果。没有过渡，没有动画。

如何将一个 div 附加到另一个 div，并对其产生 slideDown或 show('slow')效应？

221917 次浏览
小开

将附加的 div 设置为最初通过 cssvisibility:hidden隐藏。

小开

比如:

$('#test').append('<div id="newdiv">Hello</div>').hide().show('slow');

应该这么做吗？

编辑: 对不起，代码错误，并采纳了马特的建议了。

小开
最佳答案

追加效果不起作用，因为只要追加了 div，浏览器显示的内容就会更新。所以，结合 Mark B 和 Steerpike 的回答:

在实际添加之前，将要添加的 div 设置为隐藏的样式。您可以使用内联或外部 CSS 脚本进行此操作，也可以将 div 创建为

<div id="new_div" style="display: none;"> ... </div>

然后 你可以将效果链接到你的附加(小样) :

$('#new_div').appendTo('#original_div').show('slow');

或(小样) :

var $new = $('#new_div');
$('#original_div').append($new);
$new.show('slow');
小开

关键在于:

  1. 你正在调用’附加’在父
  2. 但是你想给新来的孩子打电话

这对我有用:

var new_item = $('<p>hello</p>').hide();
parent.append(new_item);
new_item.show('normal');

或:

$('<p>hello</p>').hide().appendTo(parent).show('normal');
小开

处理传入数据(比如来自 ajax 呼叫)的另一种方式:

var new_div = $(data).hide();
$('#old_div').append(new_div);
new_div.slideDown();
小开

我需要一个类似的解决方案，想在墙上添加数据，像 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>
小开

当您使用参数 "slow"附加到 div、 藏起来和 表现出来时。

$("#img_container").append(first_div).hide().show('slow');
小开

如果您使用动画，就有可能显示流畅。 在风格只需添加“动画: 显示1”和整个外观描述在关键帧。

小开

就我而言:

$("div.which-stores-content").append("<div class="content">Content</div>);
$("div.content").hide().show("fast");

你可以调整你的 css 与可见性: 隐藏-> 可见性: 可见和调整过渡等过渡: 可见性1.0 s;

小开

在我的最后一个项目中，我有这种确切的需要，我在其中添加了样式 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>


提交答案