Este es mi código:jQuery .hide() fadeIn()
$('.items').html(response).hide().fadeIn();
El problema es que cuando este se carga la página "salta" debido a que el .hide() .. ¿hay alguna otra forma de hacer esto?
Se podría utilizar la opacidad en cambio si se quiere mantener el dimensiones del elemento intacto:
$('.items').html(response).css({'opacity':0}).animate({'opacity':1});
Ocultar el uso de CSS y luego se desvanecen en caso necesario:
css:
.items {
display:none;
}
JavaScript
$('.items').html(response).fadeIn();
El problema es que esta es una respuesta de AJAX. Hay elementos que muestran en la carga de la página que estoy filtrando – Mackelito
tiene un par de otras opciones: reemplace el HTML y resalte el div para mostrar su cambio ... anexe un Div y deslice el div anterior hacia arriba y luego deslice el nuevo div hacia arriba .... o fadeOut()/fadeIn()? – ManseUK
Si desea mostrar un TRANSICIÓN suave entre el contenido existente y la nueva, intente lo siguiente:
$(function(){
$('.items').fadeOut(function(){
$(this).html(response).fadeIn();
})
});
Esta es una solución más limpia ya que evita un efecto de parpadeo del elemento que se añade en primer lugar, y rápidamente tener su opacidad ajustado a 0.
de esta manera el elem se añaden ya tiene una opacidad de 0.
var elem = $(response).css({'opacity': 0});
$('.items').html(elem);
elem.animate({'opacity': 1});
¿Por qué ha conseguido ocultar() dos veces? Una vez que esté oculto, debe permanecer oculto hasta que lo muestres() de nuevo – danwellman
Oh .. mi mal ... solo un error tipográfico ... ¡editaré la pregunta! – Mackelito
¿Están los elementos ".tem" visibles cuando se carga la página (y luego, presumiblemente, se actualizan a través de una llamada ajax)? ¿La idea de ocultarse y desvanecerse es llamar la atención sobre el bit que acaba de actualizarse? – nnnnnn