jQuery div flickers when added to document with slideDown

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

Frage

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>
War es hilfreich?

Lösung

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/

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top