jQuery 使用附加效果

Posted 2023-02-18

【中文标题】jQuery 使用附加效果

【英文标题】：jQuery using append with effects

【发布时间】：2010-12-03 23:01:56

【问题描述】：

如何将.append() 与show('slow') 之类的效果一起使用

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

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

【参考方案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');

【讨论】：

可能是内联样式，添加了一个类似于“隐藏”的css类，相当于显示：none is ..“classier”（baddoom tsh）;）

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

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

演示完美运行，但它假定内容存在 - 因此如果您正在生成内容，它将无法工作，例如。拉取图像的 alt 内容以创建标题或 div...

【参考方案2】：

本质是这样的：

您在父级上调用“附加” 但您想对新孩子调用“显示”

这对我有用：

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

或：

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

【讨论】：

这两种方法我都试过了，还是不行。附加内容没有平滑的滑动效果。

'normal' 不是一个适合速度的字符串。将其留空以表示没有过渡（立即显示）。使用字符串'fast' 200ms 或'slow' 600ms。或输入任何数字，如@9​​87654327@ (= 747ms) 来定义自己的速度。查看docs 并查找动画/持续时间。

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

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

【参考方案3】：

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

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

【参考方案4】：

类似：

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

应该这样做吗？

编辑：抱歉，代码错误，也采纳了马特的建议。

【讨论】：

不确定这是否能达到他想要的效果，但如果是这样，你会链接这些功能：$('#divid').append('#newdiv').hide().show('slow')。

它确实有效； #newdiv 位是错误的，你是对的，你可以链接它们。我现在已经编辑了我的答案。

这是最好的答案一行干净，做它应该做的。

【参考方案5】：

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

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

【讨论】：

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

【参考方案6】：

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

【参考方案7】：

我需要类似的解决方案，想在 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>";

【参考方案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>

【参考方案9】：

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

【参考方案10】：

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

【参考方案11】：

就我而言：

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

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