jQuery usando append con efectos
¿Cómo puedo usar .append() con efectos como show('slow')
Tener efectos sobre append no parece funcionar en absoluto, y da el mismo resultado que normal show(). Sin transiciones, sin animaciones.
¿Cómo puedo añadir un div a otro, y tener un slideDown o show('slow') efecto sobre él?
10 answers
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:
Estile el div que está agregando como oculto antes de agregarlo. Puede hacerlo con un script CSS interno o externo, o simplemente crear el div como
<div id="new_div" style="display: none;"> ... </div>
Entonces puedes encadenar efectos a tu demo append ():
$('#new_div').appendTo('#original_div').show('slow');
O ( demo):
var $new = $('#new_div');
$('#original_div').append($new);
$new.show('slow');
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-01-08 00:43:35
La esencia es esta:
- Estás llamando 'append' al padre
- pero quieres llamar 'show' al nuevo hijo
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');
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2009-12-04 18:38:14
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();
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2011-03-29 21:04:23
Algo como:
$('#test').append('<div id="newdiv">Hello</div>').hide().show('slow');
¿Debería hacerlo?
Editar: lo siento, error en el código y tomó la sugerencia de Matt a bordo también.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2009-10-05 14:14:40
Cuando se añade al div, ocultarlo y mostrarlo con el argumento "slow".
$("#img_container").append(first_div).hide().show('slow');
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-07-04 09:06:50
Establezca el div anexado para que se oculte inicialmente a través de css visibility:hidden.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-07-18 18:46:52
Necesitaba un tipo similar de solución, quería agregar datos en un muro como facebook, cuando se publica,use prepend() para agregar el último post 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 is
if (isset($_POST))
{
$feed = $_POST['feed'];
echo "<p id=\"result\" style=\"width:200px;height:50px;background-color:lightgray;display:none;\">$feed</p>";
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-07-26 01:27:35
¿Por qué no simplemente escondes, agregas 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>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-05-21 23:17:05
Es posible mostrar suave si se utiliza animación. En estilo, simplemente agregue "animación: mostrar 1s" y toda la apariencia se describa en fotogramas clave.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-05-06 08:24:41
En mi caso:
$("div.which-stores-content").append("<div class="content">Content</div>);
$("div.content").hide().show("fast");
Puede ajustar su css con visibilidad: oculto - > visibilidad: visible y ajustar las transiciones etc transición: visibilidad 1.0 s;
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-08-19 11:03:16