jQuery div flickers when added to document with slideDown

StackOverflow https://stackoverflow.com/questions/20980804

题

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. 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>
有帮助吗？

解决方案

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/

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top