inside - jquery selector

Animar la visualización de CSS

Question

¿Hay alguna manera de animar la propiedad de visualización CSS en jQuery? Tengo los siguientes

$(".maincontent").css("display","block");

Y quiero que haga algo como esto:

$(".maincontent").animate({"display": "block"}, 2500);

Answer 1

Animar la opacidad usando jQuery es más viable que la propiedad de visualización, aquí la opacidad se anima de 0 a 1 en 1 segundo:

$(".maincontent").animate({opacity:1},1000)

Entonces el css debería ser así:

.maincontent{ 
opacity: 0;
}

Si planea ocultar todo el bloque antes de la transición, podría tener una propiedad de visualización.

.maincontent{
opacity: 0;
display: none;
}

Luego para mostrar el bloque con animación:

$(".maincontent").show().animate({opacity:1},1000 function(){
  (callback function here)
})

¡Espero que esto ayude!

Answer 2

Podrías hacer algo como esto:

$("div").css({
    "opacity":"0",
    "display":"block",
}).show().animate({opacity:1})

Ejemplo: http://jsfiddle.net/charlescarver/g7z6m/

Esto tiene en cuenta la display:none , ya que aún se eliminará del flujo de la página hasta que se invoque el código, donde se mostrará, luego se establecerá su opacidad en 0. Luego, se animará su opacidad a 1 cuando Llama al código.

Answer 3

Prueba esto (como mencioné en los comentarios):

Puedes usar el método .delay() . ES DECIR:

$(".maincontent").delay(2500).show();

Answer 4

Solo usa .show() pasándole un parámetro:

$(".maincontent").show(2500);

Editar (basado en comentarios) :

El código anterior se desvanece en el elemento en un intervalo de 2,5 segundos. Si, en cambio, desea un retraso de 2.5 segundos y luego desea que se muestre el elemento, use lo siguiente:

$(".maincontent").delay(2500).fadeIn();

Si, por supuesto, desea un retraso y un desvanecimiento más prolongado, simplemente pase la cantidad de milisegundos deseada a cada método.