jQuery div通过slideDown添加到文档时闪烁
[英]jQuery div flickers when added to document with slideDown
问题描述
When I add dynamically a div to another parent div (as in http://jsfiddle.net/RP3Zy/1/ ) all the parent div is rerendered, making it flickers. 
当我将div动态添加到另一个父div时（如http://jsfiddle.net/RP3Zy/1/ ），所有父div都将重新呈现，使其闪烁。 How can I avoid this? 如何避免这种情况？
<html>
<head></head>
<body>
<button id="add">Add</button>
<button id="hide">Hide all</button>
<div class="container"></div>
<script type="text/javascript">
$("#add").click(function() {
var divs = $(".dyn");
console.log(divs.length);
var adiv = $(".container").append('<div id="div" class="dyn">I\'m no more hidden!</div>').not(divs).hide().slideDown();
});
$("#hide").click(function() {
$(".container").slideUp();
});
</script>
</body>
</html>
1 个解决方案
解决方案1
0 已采纳 2014-01-07 20:15:27
It looks like you're trying to slideDown against the whole parent element, when you really only want to slideDown on the one you're adding. 看起来，当您真的只想在要添加的元素上滑动时，就好像要在整个父元素上滑动。 Something like this might seems to work: 这样的事情似乎可行：
$("#add").click(function() {
elem = $('<div id="div" class="dyn">I\'m no more hidden!</div>').hide();
$(".container").append(elem);
elem.slideDown();
});
$("#hide").click(function() {
$(".container").slideUp();
});
Check out an example here: http://jsfiddle.net/RP3Zy/2/ 在此处查看示例： http : //jsfiddle.net/RP3Zy/2/
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.