jQuery div flickers when added to document with slideDown

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

Pregunta

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>
¿Fue útil?

Solución

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/

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top