Please enable / Por favor activa JavaScript!
Por favor activa el Javascript![ ? ]
Servidores VPS rápidos, escalables y muy económicos:

Servidor VPS SSD Optimizados

El artículo con ID 1093, con la dirección web https://www.exabyteinformatica.com/tienda/foro/fade-con-jquery-teoria-y-ejemplos-t1093.html y con una longitud de 91 caracteres, ha sido procesada satisfactóriamente. En el foro verás iconos que si eres un gamer de Nintendo te serán familiares: la seta grande expande tu conocimiento, la seta verde te abre un nuevo umbral de conocimiento. Destapa conocimientos (seta verde) y házlos crecer con la seta roja. Para dar tu opinión sobre este tema o cualquier otro, antes de poder escribir comentarios, es imprescindible registrarte, tu cartera no sufrirá daños ni directos ni colaterales: es GRATIS.

Registrándote aceptas haber leído y estar de acuerdo con las Normas generales del foro. Sólo te pedimos un valor: el respeto por los demás miembros de la comunidad. De detectar alguna actividad sospechosa y si trasciende a más, tu cuenta puede ser dada de baja definitivamente de nuestro sistema.

Cuando estés registrado y quieras escribir en el foro, por favor, usa tus propias palabras. No plagies contenido de otros ni de otras webs ya que si detectamos que tu contenido no es original, éste será sujeto de ser borrado automáticamente por nuestro sistema anti-spam.

Para concluir, te deseamos un muy provechoso aprendizaje y seguro que estaremos encantados con tus aportaciones. No olvides presentarte a la comunidad si aún no te has registrado.

¡Agradecidos de tenerte con nosotr@s y esperamos leerte pronto!

Datos internos informativos (No hagas caso de estos datos, son para los administradores de Exaforo)

Fecha y hora de carga de esta página: 23/112017 a las 14:15:19
Memória total usada: 7525256

¿Por qué aparece el logo de Paypal en los temas? ¿Cobra Exaforo por usar su foro? No cobramos por usar el foro y el logo de Paypal es el de las donaciones. Tener en marcha un servidor 24/365, costear el hosting, los certificados digitales SSL, nuestros equipos…todo esto conlleva un coste que tratamos de sufragar mediante las donaciones. Nuestra aportación, cuando adquirimos equipos nuevos, consiste en donar nuestros viejos equipos a centros educativos con pocos recursos para que su alumnado (la mayoría niños) puedan desempeñar las asignaturas de tecnología y el centro pueda cubrir unos pocos puntos de trabajo. Tus donaciones no solo nos ayudan a nosotros sino también a los niños de las escuelas. Por eso es tan importante, porque a pesar que nosotros fomentamos el conocimiento libre, las herramientas para desempeñar dicho trabajo no lo son.

Más abajo verás un botón con el logo de Paypal. Si haces clic en el botón, te llevará a la página oficial de Paypal, allí dentro, con tu cuenta de Paypal, puedes hacer la donación del importe que tú quieras. Nosotros no pedimos un mínimo, puedes donar 1 céntimo de € si quieres o la cantidad que tú quieras. Si donas o no donas, solo te diremos una cosa: ¡Muchas gracias por habernos leído hasta aquí!

Fade con jQuery (teoria y ejemplos)  Fade con jQuery (teoria y ejemplos)

Valoración de éste post
4.96 / 5 de 473 votos



Mensajes: 955


Puntos totales:

Enhorabuena!

32





El contenido de este artículo o información está sujeto a una licencia Creative Commons BY (CC-BY), puedes divulgar públicamente este contenido pero deberás hacer mención del autor: Kernel e indicar la dirección web de esta página: https://www.exabyteinformatica.com/tienda/foro/fade-con-jquery-teoria-y-ejemplos-t1093.html

The content of this article or any related information is under the Creative Commons license BY, you can republish this content freely but you must mention the author of this article: Kernel and indicate the URL of this page: https://www.exabyteinformatica.com/tienda/foro/fade-con-jquery-teoria-y-ejemplos-t1093.html

Bajo licencia de Creative Commons


jQuery fadeIn(), fadeOut(), fadeTo() y fadeToggle(): Transiciones con deslizamientos

En el post de hoy voy a hablar del efecto de jQuery ‘fading’, este efecto de transiciones consta de 4 funciones:

fadeIn()
fadeOut()
fadeTo()
fadeToggle()

Son efectos básicos como lo son jQuery show() & hide() y jQuery slideDown(), slideUp() y slideToggle. Estas 4 funciones no solo hacen ocultar o mostrar divs, si no que realizan variaciones de opacidad al ocultar o mostrar los objetos.

Otra función importante es jQuery animate() para realizar animaciones CSS con elelementos del DOM.

El efecto fading consiste en cambiar gradualmente la opacidad de un elemento de nuestra web

Voy a ir comentando la sintaxis de cada ‘efecto fading‘ y al final haré unas demos de ejemplo para ver en funcionamiento todas las posibilidades.

Estos efectos no suelen causar conflitos de jQuery, pero si vuestra web tiene bastantes funciones jQuery no dudéis en caso de incompatibilidades usar jQuery noConflict().

SINTAXIS DE JQUERY FADEIN()

El efecto fadeIn() muestra un elemento (anteriormente oculto) cambiando su opacidad, aquí tenéis su sintaxis extraída de su web oficial.

$(elemento).fadeIn(speed,easing,callback)


Vemos que la función tiene 3 posibles parámetros además del elemento con el queremos interactuar. Vamos a repasarlos:

elemento (obligatorio): Este valor será normalmente el id del elemento (‘#’) que queremos manipular. También puede ser un class (‘.’) o etiqueta.
speed (opcional): Velocidad de la duración del efecto en milisengundos. También pueden pasarse los valores ‘fast‘ y ‘slow‘.
easing (opcional): Velocidad de la animación en diferentes puntos de la misma. El valor por defecto es ‘swing‘ (movimiento rápido al principio y final y lento por el medio de la animación), en cambio el valor ‘linear‘ ofrece una animación constante sin cambios de velocidad.
callback (opcional): Función callback que se ejecutará cuando el efecto se haya completado.

SINTAXIS DE JQUERY FADEOUT()

El efecto fadeOut() oculta un elemento variando su opacidad, veamos su sintaxis extraída de su web oficial.

$(elemento).fadeOut(speed,easing,callback)


Al igual que fadeIn() la función fadeOut() tiene 3 posibles parámetros además del elemento con el queremos interactuar. Aquí la explicación:

elemento (obligatorio): Este valor será normalmente el id del elemento (‘#’) que queremos manipular. También puede ser un class (‘.’) o etiqueta.
speed (opcional): Velocidad de la duración del efecto en milisengundos. También pueden pasarse los valores ‘fast‘ y ‘slow‘.
easing (opcional): Velocidad de la animación en diferentes puntos de la misma. El valor por defecto es ‘swing‘ (movimiento rápido al principio y final y lento por el medio de la animación), en cambio el valor ‘linear‘ ofrece una animación constante sin cambios de velocidad.
callback (opcional): Función/acción que se ejecutará cuando el efecto se haya completado.

SINTAXIS DE JQUERY FADETO()

El efecto fadeTo() asigna un nivel de opacidad de un elemento dado. Os pongo su sintaxis tal y como viene en su página oficial.

$(elemento).fadeTo(speed,opacity,easing,callback)


Sintaxis parecida a los 2 efectos anteriores fadeIn() y fadeOut(), os explico las 4 variables además del objeto a manipular que podemos llegar a pasar en esta función:

elemento (obligatorio): Este valor será normalmente el id del elemento (‘#’) que queremos manipular. También puede ser un class (‘.’) o etiqueta.
speed (oblgatorio): Velocidad de la duración del efecto en milisengundos. También pueden pasarse los valores ‘fast‘ y ‘slow‘.
opacity (obligatorio): Nivel opacidad que queremos asignar al elemento, el valor deberá estar entre 0.00 y 1.00.
easing (opcional): Velocidad de la animación en diferentes puntos de la misma. El valor por defecto es ‘swing‘ (movimiento rápido al principio y final y lento por el medio de la animación), en cambio el valor ‘linear‘ ofrece una animación constante sin cambios de velocidad.
callback (opcional): Función/acción que se ejecutará cuando el efecto se haya completado.

SINTAXIS DE JQUERY FADETOGGLE()

Esta última sintaxis y trataré el efecto fadeToggle(), la acción de este efecto consiste en alternar los efecto fadeIn() y fadeOut() sin necesidad de andar duplicando líneas de código.

Os explico su sintaxis extraída de su web oficial:

$(elemento).fadeToggle(speed,easing,callback)


Y ahora va la descripción de sus parámetros (iguales que los anteriores):

elemento (obligatorio): Este valor será normalmente el id del elemento (‘#’) que queremos manipular. También puede ser un class (‘.’) o etiqueta.
speed (opcional): Velocidad de la duración del efecto en milisengundos. También pueden pasarse los valores ‘fast‘ y ‘slow‘.
easing (opcional): Velocidad de la animación en diferentes puntos de la misma. El valor por defecto es ‘swing‘ (movimiento rápido al principio y final y lento por el medio de la animación), en cambio el valor ‘linear‘ ofrece una animación constante sin cambios de velocidad.
callback (opcional): Función/acción que se ejecutará cuando el efecto se haya completado.

RESUMEN DEL EFECTO DE OPACIDAD FADIN DE JQUERY

Ya hemos visto las 4 funciones de efectos fading, básicamente podemos decir que usando las 4 podemos mostrar, ocultar, asignar opacidad y alternar la aparición y desaparición de elementos de nuestra web variando la opacidad de los mismos.

En las 2 siguientes demos utilizaré este código HTML para mostrar/ocultar un recuadro negro y asi poder ver claramente el los efectos de transición de opacidad.

<div id="rectangulo" style="padding:10px 10px 10px 10px; background-color:#000; color:#fff;">Rectángulo de ejemplo, que variará de opacidad</div>


EJEMPLOS DE JQUERY FADEIN() Y FADEOUT()

Vamos con la primera demo de ejemplo de jQuery fadeIn() y fadeOut, en ella haremos desaparecer y mostrar un elemento variando su opacidad.

Os pongo el código jQuery utilizado en la demo.

<script type='text/javascript' src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
 
<script type="text/javascript">
   $(document).ready(function() {
      $("#mostrar").click(function(event) {
         $("#rectangulo").fadeIn();
      });
      $("#mostrar2").click(function(event) {
         $("#rectangulo").fadeIn(4000);
      });
      $("#mostrar3").click(function(event) {
         $("#rectangulo").fadeIn(4000, function() {
            alert ('Efecto fadeIn terminado!');
            });
      });
      $("#ocultar").click(function(event) {
         $("#rectangulo").fadeOut();
      });
      $("#ocultar2").click(function(event) {
         $("#rectangulo").fadeOut(4000);
      });
      $("#ocultar3").click(function(event) {
         $("#rectangulo").fadeOut(4000, function() {
            alert ('Efecto fadeOut terminado!');
            });
      });
   });
</script>


Vamos a repasar el código paso a paso:

(Línea 1): El primer paso es añadir la librería de jQuery para que funcione nuestro script.
(Líneas 6, 9 y 12): Controlamos el click de los botones que tienen los ids mostrar, mostrar2 y mostrar3.
(Líneas 7, 10 y 13): Realizamos el efecto fadeIn() por defecto, con 4 segundos de duración y con un mensaje vía alert como callback.
(Líneas 17, 20 y 23): Controlamos el click de los botones que tienen los ids ocultar, ocultar2 y ocultar3.
(Líneas 18, 21 y 24): Realizamos el efecto fadeOut() por defecto, con 4 segundos de duración y con un mensaje vía alert como callback.
IMPORTANTE: Si se quiere merter la duración con los valores “fast” o “slow” sería así:

$("#rectangulo").fadeOut("slow");


Y el código de los botones es el siguiente:

<input type="button" id="mostrar" value="Mostrar con fadeIn()">
<input type="button" id="ocultar" value="Ocultar con fadeOut()">
<input type="button" id="mostrar2" value="Mostrar con fadeIn() en 4000 milisengos">
<input type="button" id="ocultar2" value="Ocultar fadeOut() en 4000 milisegundos">
<input type="button" id="mostrar3" value="Mostrar con fadeIn() en 4000 milisengos y callback">
<input type="button" id="ocultar3" value="Ocultar fadeOut() en 4000 milisegundos y callback">
<input type="button" id="mostrar" value="Mostrar con fadeIn()">


EJEMPLOS DE JQUERY FADETO() Y FADETOGGLE()

Vamos a terminar el repaso al efecto fading con una segunda demo de ejemplo de jQuery fadeTo() y fadeToggle(), vamos a asignar un nivel de opacidad y una especie de switch mostrando y ocultado el rectángulo.

Aquí el codigo:

<script type='text/javascript' src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<script type="text/javascript">
   $(document).ready(function() {
      $("#opacidad05").click(function(event) {
         $("#rectangulo").fadeTo("slow",0.5);
      });
      $("#opacidad07").click(function(event) {
         $("#rectangulo").fadeTo("fast",0.7, function() {
            alert ('Efecto fadeTo terminado!');
            });
      });
      $("#alternar01").click(function(event) {
         $("#rectangulo").fadeToggle();
      });
      $("#alternar02").click(function(event) {
         $("#rectangulo").fadeToggle(4000);
      });
      $("#alternar03").click(function(event) {
         $("#rectangulo").fadeToggle("fast", function() {
            alert ('Efecto fadeToggle terminado!');
            });
      });
   });
</script>


Nuevo repaso a las líneas de código:

(Línea 1): El primer paso es añadir la librería de jQuery para que funcione nuestro script.
(Líneas 6, 9, 14, 17 y 20): Controlamos el click de los botones que tienen los ids opacidad05, opacidad07, alternar01, alternar02 y alternar03.
(Línea 7): Realizamos el efecto fadeTo con duración “slow” y opacidad 0.5.
(Línea 10): Realizamos el efecto fadeTo con duración “fast”,opacidad 0.7 y callback sacando un mensaje por pantalla.
(Línea 15): Se realiza el efecto fadeToggle, esto hace que aparezca y desparezca el elemento, si estaba visible lo ocultará y viceversa.
(Línea 18): Se realiza el efecto fadeToggle con duración 4000 milisegundos con mismo efecto que el punto anterior.
(Línea 22): De nuevo se ejecuta el efecto fadeToggle con duración “fast” y callback sacando un mensaje por pantalla.

Termino poniendo el código de los botones:

<input type="button" id="opacidad05" value="Asignar un 0.5 de opacidad con fadeTo() con duración 'slow'">
<input type="button" id="opacidad07" value="Asignar un 0.7 de opacidad con fadeTo() con duración 'fast' con callback">
<input type="button" id="alternar01" value="Alternar opacidad con con fadeToggle()">
<input type="button" id="alternar02" value="Alternar opacidad durante 4000 milisengos con fadeToggle()">
<input type="button" id="alternar03" value="Alternar opacidad con duración 'fast' con fadeToggle() con callback">


Espero que estos ejemplos os sirvan de ayuda, y como siempre tenéis los comentarios para cualquier duda, sugerencia o error.

Salta al siguiente tema: Ayuda con un Json

Quizás también te interese:
Si has encontrado información útil en Exaforo, ayúdanos a seguir creciendo. Muchas gracias por confiar en nosotros!


Volver a Javascript/Java/JSP...