jQuery使用带有效果的追加

144

如何使用.append()类似效果show('slow')

append似乎根本没有效果，并且其效果与normal相同show()。没有过渡，没有动画。

我怎么能一个DIV追加到另一个，并有一个slideDown或show('slow')效果上呢？

— 大卫·金
source

195

附加效果无效，因为div附加后，浏览器显示的内容就会立即更新。因此，结合Mark B和Steerpike的答案：

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

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

然后，您可以将效果链接到您的append（demo）：

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

或（演示）：

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

— 马特·鲍尔
source

5

可能是内联样式，添加了一个css类，例如“ hidden”，它等同于显示：没有一个类是..“ classier”（baddoom tsh）；）

— dmp 2010年

2

这行不通。当使用append时，它将返回original_div而不是新添加的元素。因此，您实际上是在容器上调用show。

— 2013年

1

@Vic碰巧.append()甚至没有选择符字符串。这个想法仍然是正确的。谢谢，更新。

— Matt Ball

该演示可以完美地运行，但是它假定内容存在-因此，如果您正在生成内容，则它将不起作用。拉图像的替代内容以创建标题或div ...

— Drew Dello Stritto

124

本质是这样的：

您在父级上称“追加”
但您想在新孩子身上叫“显示”

这对我有用：

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

2

我已经尝试了这两种方法，但都行不通。附加内容没有平滑的滑动效果。

— 克里斯22年

'normal'不是适合速度的字符串。将其保留为空白，不进行任何过渡（立即显示）。使用字符串200毫秒'fast'或'slow'600毫秒。或键入任何数字$("element").show(747)（例如747毫秒）来定义自己的速度。请参阅文档，并查找动画/持续时间。

— 2014年

2

带有幻灯片效果： element.slideUp("slow", function(){ element.appendTo(parent).hide(); element.slideDown(); });

— 凯文·格拉伯

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

— lilalinux16年

23

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

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

— 纳斯潘斯基
source

15

就像是：

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

应该这样做吗？

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

— 马克·贝尔
source

1

不知道是否会做他想做的，但如果是这样，你最好链的功能：$('#divid').append('#newdiv').hide().show('slow')。

— 马特·鲍尔

它确实有效；#newdiv位是错误的，但是您是对的，您可以将其链接。我已经编辑了答案。

— Mark Bell

8

当您附加到div时，将其隐藏并与参数一起显示"slow"。

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

— Shubham Khatri
source

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

— JesuLopez，

4

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

— Steerpike
source

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

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>

— 超级英雄赛子
source

0

如果使用“动画”，则可能显示流畅。在样式上只需添加“动画：显示1s”，整个外观就会描述在关键帧中。

— NeedHate
source

0

就我而言：

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

您可以使用可见性：隐藏->可见性：可见来调整CSS，并调整过渡等过渡：可见性1.0秒；

— 保险杠
source