jquery - test - sistema de votacion en php y mysql

jQuery usando append con efectos

Question

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

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

¿Cómo puedo agregar un div a otro y tener un efecto slideDown o show(''slow'') sobre él?

Answer 1

¿Por qué no simplemente ocultas, 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>

Answer 2

Algo como:

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

¿Deberías hacerlo?

Editar: perdón, error en el código y también aceptó la sugerencia de Matt.

Answer 3

Cuando anexas al div, ocúltalo y muéstralo con el argumento "slow" .

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

Answer 4

En mi caso:

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

puede ajustar su css con visibilidad: hidden -> visibility: visible y ajustar la transición de transición, etc.: visibilidad 1.0s;

Answer 5

Es posible mostrar sin problemas si usa Animación. Con estilo solo agrega "animación: muestra 1s" y todo el aspecto se describe en fotogramas clave.

Answer 6

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

Answer 7

La esencia es esta:

1. Estás llamando ''anexar'' al padre
2. pero quieres llamar ''mostrar'' al 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 8

Necesitaba un tipo similar de solución, quería agregar datos en una pared como facebook, cuando se publica, usa prepend() para agregar la última publicación 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();   
        });   

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


}

Answer 9

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

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

Answer 10

Tener efectos en agregar 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:

Ajuste el div que está agregando como oculto antes de agregarlo. Puedes hacerlo con script CSS en línea o externo, o simplemente crea el div como

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

Luego puede encadenar efectos a su apéndice ( demo ):

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

O ( demo ):

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