jQuery utilizando append con efectos

Question

¿Cómo puedo utilizar .append() con efectos como show('slow')

no parece tener efectos sobre append a trabajar en absoluto, y que dan el mismo resultado que show() normal. No hay transiciones, sin animaciones.

¿Cómo puedo añadir un div a otro, y tienen un efecto slideDown o show('slow') en él?

Answer 1

Tener efectos sobre append no funcionará porque el contenido del navegador muestra se actualiza tan pronto como se añade el div. Por lo tanto, para combinar las respuestas de Mark B y Steerpike de:

Estilo de la div que estés añadiendo que oculta antes de que realmente lo añaden. Puede hacerlo con línea o secuencia de comandos CSS externo, o simplemente crear el div como

<div id="new_div" style="display: none;"> ... </div>

Entonces que pueda efectos en cadena a su modo de adición ( demostración ):

$('#new_div').appendTo('#original_div').show('slow');

O ( demostración ):

var $new = $('#new_div');
$('#original_div').append($new);
$new.show('slow');

Answer 2

La esencia es la siguiente:

1. Usted está llamando 'append' en la matriz
2. pero al que desea llamar 'show' en el nuevo niño

Esto funciona para mí:

var new_item = $('<p>hello</p>').hide();
parent.append(new_item);
new_item.show('normal');

o

$('<p>hello</p>').hide().appendTo(parent).show('normal');

Answer 3

Otra forma cuando se trabaja con los datos de entrada (como de una llamada AJAX):

var new_div = $(data).hide();
$('#old_div').append(new_div);
new_div.slideDown();

Answer 4

Algo así como:

$('#test').append('<div id="newdiv">Hello</div>').hide().show('slow');

debería hacerlo?

Edit: Lo siento, error en el código y tomó la sugerencia de Matt a bordo también

.

Answer 5

Cuando anexa a la div, ocultarlo y mostrar con el "slow" argumento.

$("#img_container").append(first_div).hide().show('slow');

Answer 6

Ajuste el div anexa que se oculta inicialmente a través de visibility:hidden css.

Answer 7

Yo estaba en la necesidad de un tipo similar de solución, quería añadir datos en una pared como facebook, cuando se publicó, el uso prepend() para añadir el último mensaje en la parte superior, el pensamiento podría ser útil para otros ..

$("#statusupdate").submit( function () {    
          $.post(
           'ajax.php',
            $(this).serialize(),
            function(data){

                $("#box").prepend($(data).fadeIn('slow'));                  
                $("#status").val('');
            }
          );
           event.preventDefault();   
        });   

en el código ajax.php es

if (isset($_POST))
{

    $feed = $_POST['feed'];
    echo "<p id=\"result\" style=\"width:200px;height:50px;background-color:lightgray;display:none;\">$feed</p>";


}

Answer 8

¿Por qué no simplemente ocultar, añadir, a continuación, mostrar, como esto:

<div id="parent1" style="  width: 300px; height: 300px; background-color: yellow;">
    <div id="child" style=" width: 100px; height: 100px; background-color: red;"></div>
</div>


<div id="parent2" style="  width: 300px; height: 300px; background-color: green;">
</div>

<input id="mybutton" type="button" value="move">

<script>
    $("#mybutton").click(function(){
        $('#child').hide(1000, function(){
            $('#parent2').append($('#child'));
            $('#child').show(1000);
        });

    });
</script>

Answer 9

Es posible mostrar sin problemas si se utiliza la animación. En el estilo, añada simplemente "animación: Mostrar 1s" y todo el Discribe aparición en fotogramas clave

.

Answer 10

En mi caso:

$("div.which-stores-content").append("<div class="content">Content</div>);
$("div.content").hide().show("fast");

puede ajustar su css con una visibilidad: oculto -> Visibilidad: Visible y ajustar las transiciones etc transición: la visibilidad 1,0s;