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