jQuery使用带有效果的append方法

Question

jQuery使用带有效果的append方法

jqueryanimationappendeffectsshow

156

我如何在使用.append()时添加像show('slow')这样的效果？

在append中使用效果似乎完全不起作用，结果与普通的show()相同。没有转换效果，也没有动画。

我如何将一个

元素附加到另一个

元素，并对其进行slideDown或show('slow')效果的处理？

- David King

11个回答

129

关键点是：

您正在对父元素调用'append'
但你想在新的子元素上调用'show'

以下方法适用于我：

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

或：

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

- Derek Illchuk

2

我已经尝试了这两种方法，但都没有成功。追加的内容没有平滑的滑动效果。 - Chris22

“normal”不是一个适当的速度字符串。如果要立即显示，请将其留空，使用字符串“fast”表示200毫秒或“slow”表示600毫秒。或者像 $("element").show(747) 这样输入任何数字（= 747ms）来定义自己的速度。请参阅文档并查找动画/持续时间。 - honk31

2

带有滑动效果：

element.slideUp("slow", function(){
  element.appendTo(parent).hide();
  element.slideDown();
});

- Kevin Grabher

我喜欢将隐藏部分保留在模板之外。 - lilalinux

27

当使用传入数据（例如来自AJAX调用）时的另一种方法：

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

- naspinski

18

类似这样：

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

应该这样做吗？

编辑：抱歉，代码有误，并采纳了Matt的建议。

- Mark Bell

1

不确定这是否符合他的要求，但如果是的话，您可以链接这些函数：$('#divid').append('#newdiv').hide().show('slow')。 - Matt Ball

它确实有效；但 #newdiv 部分是错误的，你是对的，你可以将它们链接起来。我现在已经编辑了我的答案。 - Mark Bell

这是最佳答案，一行简洁且可以按照预期执行。 - Grogu

8

当您向 div 追加内容时，隐藏它并使用参数 "slow" 显示它。

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

- user3287594

隐藏和显示事件适用于 #img_container，而不是 first_div，您应该使用 appendTo。 - JesuLopez

4

通过css将附加的div设置为初始隐藏状态，使用visibility:hidden。

- Steerpike

3

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


}

- Karthik Sekar

2

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

- Ashish Neupane

1

为什么不像这样简单地隐藏、追加，然后显示呢：

<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>

- Megamind Saiko

0

如果使用动画，可以实现平滑显示。只需在样式中添加“animation: show 1s”，并在关键帧中描述整个外观即可。

- NeedH8

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Matt Ball · Accepted Answer

对于追加操作，对元素应用效果是无效的，因为浏览器显示的内容会在div被追加后立即更新。所以，结合Mark B和Steerpike的答案：

在实际追加之前将要追加的元素样式设为隐藏。可以使用内联或外部CSS脚本进行操作，或者只需创建一个具有“display:none”样式属性的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');