149

我怎样才能使用.append()像这样的效果show('slow')

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

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

4

11 回答 11

201

对追加的影响将不起作用，因为浏览器显示的内容会在追加 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');
于 2009-10-05T14:13:31.033 回答
127

本质是这样的：

  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');
于 2009-12-04T14:54:40.413 回答
24

处理传入数据的另一种方式（例如来自 ajax 调用）：

var new_div = $(data).hide();
$('#old_div').append(new_div);
new_div.slideDown();
于 2011-03-29T21:04:23.040 回答
17

就像是：

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

应该做吗？

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

于 2009-10-05T13:51:39.767 回答
8

当您附加到 div 时，隐藏它并使用参数显示它"slow"。

$("#img_container").append(first_div).hide().show('slow');
于 2015-01-28T06:30:02.290 回答
4

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

于 2009-10-05T13:50:12.720 回答
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>";


}
于 2012-07-26T01:27:35.843 回答
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>
于 2014-05-21T23:17:05.763 回答
1

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

于 2021-04-19T08:59:32.493 回答
0

如果使用动画，则可以显示平滑。在样式中只需添加“动画：显示 1s”，整个外观在关键帧中描述。

于 2015-05-06T08:24:41.803 回答
0

就我而言：

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

您可以使用 visibility:hidden -> visibility:visible 调整 CSS 并调整过渡等 transition: visibility 1.0s；

于 2015-08-19T11:03:16.777 回答