jQuery usando append con efectos


144

¿Cómo puedo usar .append()con efectos comoshow('slow')

Tener efectos appendno parece funcionar en absoluto, y da el mismo resultado que lo normal show(). Sin transiciones, sin animaciones.

¿Cómo puedo añadir un div a otro, y tienen una slideDowno show('slow')efecto sobre ella?

Respuestas:


195

Tener efectos en append no funcionará porque el contenido que muestra el navegador se actualiza tan pronto como se agrega el div. Entonces, para combinar las respuestas de Mark B y Steerpike:

Dale estilo al div que estás agregando como oculto antes de agregarlo. Puede hacerlo con un script CSS en línea o externo, o simplemente crear el div como

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

Luego , puede encadenar los efectos a su anexo ( demostración ):

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

O ( demo ):

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

55
probablemente fue el estilo en línea, agregando una clase css como "oculto" que equivale a mostrar: none is .. "classier" (baddoom tsh);)
dmp

2
Esto no funcionara. Cuando usa append, devolverá el original_div, no el elemento recién agregado. Entonces, en realidad estás llamando a show en el contenedor.
Vic

1
@Vic, como sucede .append(), ni siquiera toma una cadena de selector. Sin embargo, la idea sigue siendo correcta. Gracias, actualizado.
Matt Ball

La demostración funciona perfectamente, pero supone que el contenido existe, por lo que no funcionará si está generando el contenido, por ejemplo. tirando del contenido alternativo de una imagen para crear un título o div ...
Drew Dello Stritto

124

La esencia es esta:

  1. Estás llamando 'agregar' al padre
  2. pero quieres llamar a 'show' en el nuevo hijo

Esto funciona para mi:

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

o:

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

2
He intentado ambas formas y no funciona. No hay un efecto deslizante suave sobre el contenido adjunto.
Chris22

'normal'no es una cadena adecuada para la velocidad. déjelo en blanco para que no haya transición (aparece de inmediato). use una cuerda 'fast'por 200 ms o 'slow'por 600 ms. o escriba cualquier número como $("element").show(747)(= 747 ms) para definir su propia velocidad. ver los documentos y buscar animación / duración.
honk31

2
Con efecto de diapositiva: element.slideUp("slow", function(){ element.appendTo(parent).hide(); element.slideDown(); });
Kevin Grabher

Me gusta mantener la parte oculta fuera de la plantilla
lilalinux

23

Otra forma cuando se trabaja con datos entrantes (como de una llamada ajax):

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

15

Algo como:

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

¿Deberías hacerlo?

Editar: lo siento, error en el código y también tomé en cuenta la sugerencia de Matt.


1
No estoy seguro si eso sería hacer lo que quiera, pero si es así, usted cadena de las funciones: $('#divid').append('#newdiv').hide().show('slow').
Matt Ball el

Funciona; Sin embargo, el bit #newdiv está mal y tienes razón, puedes encadenarlos. He editado mi respuesta ahora.
Mark Bell el

8

Cuando anexes al div, escóndelo y muéstralo con el argumento "slow".

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

El evento de ocultar y mostrar se aplica al #img_container y no en el first_div, debe usar appendTo
JesuLopez

4

Configure el div adjunto para que se oculte inicialmente a través de css visibility:hidden.


3

Necesitaba un tipo de solución similar, quería agregar datos en un muro como Facebook, cuando se publique, usar prepend()para agregar la última publicación en la parte superior, pensé que 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();   
        });   

el código en 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>";


}

1

¿Por qué no te escondes, anexas y luego muestras, así:

<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>

0

Es posible mostrar sin problemas si utiliza animación. En estilo simplemente agregue "animación: mostrar 1s" y toda la apariencia se describe en fotogramas clave.


0

En mi caso:

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

puede ajustar su CSS con visibilidad: oculta -> visibilidad: visible y ajustar las transiciones, etc. transición: visibilidad 1.0s;

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.