blocks|key|1224039|text|处理传入数据(如来自ajax调用)时的另一种方法：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1224040|var+new_div+=+$(data).hide();
$('#old_div').append(new_div);
new_div.slideDown();|code-block|syntax|javascript|1224041|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Another way when working with incoming data (like from an ajax call):</p>

<pre><code>var new_div = $(data).hide();
$('#old_div').append(new_div);
new_div.slideDown();
</code></pre>


blocks|key|1438775|text|类似于：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1438776|$('#test').append('<div+id="newdiv">Hello</div>').hide().show('slow');|code-block|syntax|javascript|1438777|应该这样做吗？|1438778|编辑:抱歉，代码有误，也采纳了Matt的建议。|1438779|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>Something like:</p>

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

<p>should do it?</p>

<p>Edit: sorry, mistake in code and took Matt's suggestion on board too.</p>


blocks|key|1223956|text|通过css+visibility:hidden将附加的div设置为初始隐藏。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1223957|entityMap^0|6|H|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

<p>Set the appended div to be hidden initially through css <code>visibility:hidden</code>.</p>


blocks|key|1224139|text|我需要一个类似的解决方案，想在像facebook这样的墙上添加数据，当发布时，使用prepend()在顶部添加最新的帖子，认为可能对其他人有用。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1224140|$("#statusupdate").submit(+function+()+{++++
++++++++++$.post(
+++++++++++'ajax.php',
++++++++++++$(this).serialize(),
++++++++++++function(data){

++++++++++++++++$("#box").prepend($(data).fadeIn('slow'));++++++++++++++++++
++++++++++++++++$("#status").val('');
++++++++++++}
++++++++++);
+++++++++++event.preventDefault();+++
++++++++});+++|code-block|syntax|javascript|1224141|ajax.php中的代码是|1224142|if+(isset($_POST))
{

++++$feed+=+$_POST['feed'];
++++echo+"<p+id=\"result\"+style=\"width:200px;height:50px;background-color:lightgray;display:none;\">$feed</p>";


}|1224143|entityMap^0|15|9|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|T|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|U|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|V|8|@]|D|@]|E|$I|J]]|$1|O|3|-4|5|6|7|W|8|@]|D|@]|E|$]]]|P|$]]

<p>I was in need of a similar kind of solution, wanted to add data on a wall like facebook, when posted,use <code>prepend()</code> to add the latest post on top, thought might be useful for others..</p>

<pre><code>$("#statusupdate").submit( function () {    
          $.post(
           'ajax.php',
            $(this).serialize(),
            function(data){

                $("#box").prepend($(data).fadeIn('slow'));                  
                $("#status").val('');
            }
          );
           event.preventDefault();   
        });   
</code></pre>

<p>the code in ajax.php is</p>

<pre><code>if (isset($_POST))
{

    $feed = $_POST['feed'];
    echo "&lt;p id=\"result\" style=\"width:200px;height:50px;background-color:lightgray;display:none;\"&gt;$feed&lt;/p&gt;";


}
</code></pre>


blocks|key|1224183|text|为什么不简单地隐藏、附加，然后显示，就像这样：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1224184|<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>|code-block|syntax|javascript|1224185|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Why don't you simply hide, append, then show, like this:</p>

<pre><code>&lt;div id="parent1" style="  width: 300px; height: 300px; background-color: yellow;"&gt;
    &lt;div id="child" style=" width: 100px; height: 100px; background-color: red;"&gt;&lt;/div&gt;
&lt;/div&gt;


&lt;div id="parent2" style="  width: 300px; height: 300px; background-color: green;"&gt;
&lt;/div&gt;

&lt;input id="mybutton" type="button" value="move"&gt;

&lt;script&gt;
    $("#mybutton").click(function(){
        $('#child').hide(1000, function(){
            $('#parent2').append($('#child'));
            $('#child').show(1000);
        });

    });
&lt;/script&gt;
</code></pre>


blocks|key|1439040|text|如果使用动画，则可以显示平滑。在样式中，只需添加“动画:显示1s”，整个外观将在关键帧中描述。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1439041|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

<p>It is possible to show smooth if you use Animation. 
In style just add "animation: show 1s" and the whole appearance discribe in keyframes.</p>


blocks|key|1224279|text|在我的例子中：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1224280|$("div.which-stores-content").append("<div+class="content">Content</div>);
$("div.content").hide().show("fast");|code-block|syntax|javascript|1224281|你可以用visibility:hidden+->+visibility:visible来调整你的css，并调整过渡效果等:可见性1.0s；|1224282|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>In my case:</p>

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

<p>you can adjust your css with visibility:hidden -> visibility:visible and adjust the transitions etc transition: visibility 1.0s;</p>


blocks|key|1224338|text|在我的最后一个项目中，我使用样式display:+none;附加了元素并添加了id，这正是我需要的。在JQuery的第二行，我添加了$('#myid').show('slow');。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1224339|​|1224340|$(document).on('click','#trigger',function(){
++$('#container').append("<label+id='newLabel'+style='display:none;'+class='btn+btn-light'>New+Element</label>");
++$('#newLabel').show('slow');
});|code-block|syntax|javascript|1224341|<link+rel="stylesheet"+href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"+integrity="sha384-ggOyR0iXCbMQv3Xipma34MD%2BdH/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>|1224342|1224343|entityMap^0|G|E|1U|O|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@$9|S|A|T|B|C]|$9|U|A|V|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|W|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|X|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|J|7|Y|8|@]|D|@]|E|$K|L]]|$1|O|3|G|5|6|7|Z|8|@]|D|@]|E|$]]|$1|P|3|-4|5|6|7|10|8|@]|D|@]|E|$]]]|Q|$]]

<p>I had this exact need in my final project where I appended the element with style <code>display: none;</code> and added an id to it. In the second line of JQuery, I added <code>$('#myid').show('slow');</code>.</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).on('click','#trigger',function(){
  $('#container').append("&lt;label id='newLabel' style='display:none;' class='btn btn-light'&gt;New Element&lt;/label&gt;");
  $('#newLabel').show('slow');
});</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;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"&gt;
&lt;div id="container" class="btn-group"&gt;
  &lt;label class="btn btn-light"&gt;Old element&lt;/label&gt;
&lt;/div&gt;
&lt;button id="trigger" class="btn btn-info"&gt;Click to see effect&lt;/button&gt;
&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;</code></pre>
</div>
</div>
</p>


<p>How can I use <code>.append()</code> with effects like <code>show('slow')</code></p>

<p>Having effects on <code>append</code> doesn't seem to work at all, and it give the same result as normal <code>show()</code>. No transitions, no animations. </p>

<p>How can I append one div to another, and have a <code>slideDown</code> or <code>show('slow')</code> effect on it?</p>


jQuery using append with effects

如何将.append()与show('slow')之类的效果一起使用对append产生影响似乎根本不起作用，而且它给出的结果与正常的show()相同。没有过渡，没有动画。如何将一个div附加到另一个div，并对其产生slideDown或show('slow')效果？

问jQuery使用append with effects
EN

回答 8

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jQuery使用append with effectsEN

回答 8

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问jQuery使用append with effects
EN