Question

当我动态地将div添加到另一个父div时（如在http://jsfiddle.net/RP3Zy/1/中），所有父div都被重新渲染，使其闪烁。我怎么能避免这个？

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

Answer 1

看起来你正在尝试对整个父元素进行slideDown，当你真的只想在你要添加的那个上滑动时。这样的事情似乎有用：

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

在此处查看示例：http://jsfiddle.net/RP3Zy/2/

使用slideDown添加到文档时，jQuery div闪烁

1 个答案: