jQuery div flickers when added to document with slideDown

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

Domanda

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>
È stato utile?

Soluzione

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/

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top