Question

如何将.append()与show('slow')

等效果结合使用

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

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

Answer 1

对附加效果不起作用，因为一旦附加了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');

Answer 2

本质是：

你在父母上打电话'追加'
但你想在新孩子身上叫'show'

这对我有用：

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

或：

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

Answer 3

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

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

Answer 4

类似的东西：

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

应该这样做吗？

编辑：抱歉，代码中出现错误，并在船上也提出了马特的建议。

Answer 5

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

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

Answer 6

首先通过css visibility:hidden设置隐藏的div。

Answer 7

我需要一种类似的解决方案，想在Facebook上添加数据，发布时，使用prepend()添加最新帖子，思想可能对其他人有用.. < / p>

$("#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>";


}

Answer 8

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

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

Answer 9

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

Answer 10

就我而言：

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

你可以通过可见性调整你的css：hidden - ＆gt;可见性：可见并调整过渡等过渡：可见性1.0s;

Answer 11

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

jQuery使用append with effects

11 个答案: