Cómo animar un div de pantalla para bloquear ninguno de jquery

Cascading Style Sheets desarrolladores sitio de ayuda mostrar, ocultar y animar objetos en un sitio web. Si su página tiene un elemento DIV oculto, puede usar javascript para hacer que DIV aparecen gradualmente cambiando su estilo de visualización de "ninguna" a "bloquear" mediante un temporizador. Se necesita un poco de conocimiento de programación para que esto suceda. Usando jQuery, una biblioteca javascript multi-navegador, puede generar este impresionante efecto de aparición gradual usando una sola línea de código.

Navegar a la página web de jQuery y ver su código de jQuery. Aparece dentro de la ventana del navegador. Haga clic en el navegador de "Archivo" menú y, a continuación, haga clic "Guardar como." los "Guardar como" Se abre la ventana. Esta ventana muestra las carpetas ubicadas en su disco duro.

Busque la carpeta que contiene un documento HTML que desea utilizar para la prueba. Haga doble clic en esa carpeta para abrirla y, a continuación, haga clic "Salvar" para guardar el archivo de jQuery para esa carpeta.

Poner en marcha un editor HTML o Bloc de notas. Abra el documento HTML y pegue el siguiente código en el documento de "cabeza" sección:

Agregue el siguiente código HTML en su documento de "" sección:

Coloque esta "animateStyle" función en el documento de "guión" sección: función animateStyle (divID) {$ ("#" + DivID) .css ({ "monitor": "bloquear", "opacidad": "0" }).animar({ "opacidad": "1" }, 3000) -} Esta función contiene una única instrucción jQuery. los "CSS" función, visto en el principio de la instrucción, cambia el estilo de visualización del DIV para "bloquear," y luego establece su opacidad a cero. Esto mantiene el invisible momentáneamente DIV. los "animar" función de la propiedad anima la opacidad de la DIV cambiando el nivel de opacidad de cero a 100 por ciento. Esto crea el efecto de fundido de entrada. El último valor de la declaración, 3000, es el "duración" valor. Se determina el tiempo que tarda el DIV se desvanezca en..

Pegar el código CSS se muestra a continuación en el documento de "cabeza" sección: Su DIV, creada en el "cuerpo" sección, las referencias de esta clase. Esta clase hace que el DIV invisible estableciendo su valor de visualización a "ninguna."

Guardar este documento y abrirlo en cualquier navegador. El DIV que contiene el párrafo no aparecerá porque la clase CSS, "divStyle" establece su valor a la pantalla "ninguna. Haga clic en el "Cambia estilo" botón. El código jQuery funciona y cambia el estilo de visualización del DIV para "bloquear." Esto hace que el DIV que contiene el fundido en el párrafo lentamente.

Propina

• comprobar Cambiar la duración de la animación a cualquier valor que tiene gusto cambiando "3000" a otro número. Los valores más altos hacen que la animación de largo plazo y los más cortos lo aceleran. Puede que tenga que experimentar con esos valores para encontrar uno que crea el efecto de aparición gradual que desee sin tener demasiado tiempo.

referencias

• enlazar W3Schools: jQuery CSS (CSS) Método
• enlazar jQuery: Animación () de la API jQuery

Sobre el Autor

Después de especializarse en física, Kevin Lee comenzó a escribir profesionalmente en 1989, cuando, como desarrollador de software, también creó artículos técnicos para el Centro Espacial Johnson. Hoy en día este vaquero urbano Texas continúa poner hacia fuera software de alta calidad, así como artículos no técnicos que cubren una multitud de diversos temas que van desde los juegos hasta la actualidad.