Hosting de calidad y barato para alojar tu web:

Hosting SSD

Este post con ID 1093, con la URL https://www.exabyteinformatica.com/tienda/foro/fade-con-jquery-teoria-y-ejemplos-t1093.html y con una longitud de 91 caracteres, se ha verificado completamente. Para poder acceder a los sub-foros o temas, pulsa en el título de cada enlace de la lista de esta página (el título que aparece junto al mushroom). Recuerda que en algunas páginas hay un selector de registros situado en la parte inferior que te permitirá saltar a más páginas.Para poder comentar en este foro o en el resto de exaforo, préviamente a poder escribir tus comentarios tienes que registrarte, no te preocupes es y ha sido GRATIS desde el inicio.

En el momento de registrarte, tendrás que leer y aceptar, las Normas generales del foro. No cuesta nada agradecer un comentario de alguien o de no insultarle, el respeto es el valor más preciado que intentamos fomentar. Si detectamos cualquier actitud poco respetuosa hacia a algún miembro, tu cuenta será cancelada. Así mismo, si algún miembro tiene una actitud irrespetuosa hacia ti, su cuenta será igualmente cancelada.

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.

¡Muchas gracias por dedicarnos unos minutos y disfruta mucho con nuestra comunidad!

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

Fecha y hora de carga de esta página: 20/102018 a las 20:25:25
Memória total usada: 7540352

¿Y el logo de Paypal? ¿Exaforo no era sin ánimo de lucro? Y así es, para poder usar Exaforo nadie cobra nada, fíjate bien que el botón de Paypal es el de donaciones. Mantener la web en un servidor encendido 24 horas, contratar la conexión a internet de alta velocidad para que goces de peticiones rápidas, pagar los certificados SSL,…es decir, los costes de mantenimiento.

Nuestros pocos fondos van destinados a mantener siempre en marcha los sistemas y cuando adquirimos equipos nuevos, los viejos solemos donarlos a escuelas y centros educativos que tienen pocos recursos para adquirir equipos informáticos. Por eso tus donaciones son muy importantes ya que no solo nos ayudan a nosotros sino también a niños en edad escolar, al profesorado y a los centros educativos en general. En exaforo creemos en la formación libre y que sea accesible a todo el mundo. Si crees poder ayudarnos haciendo una donación para que sigamos creciendo como hemos ido haciendo desde 2003, te estaremos muy agradecidos, el importe de la donación lo pones tú, nosotros no pedimos una cantidad fija, piensa que puedes donar hasta mínimo 1 céntimo. Dones o no dones, muchas gracias por habernos leído hasta el final. Más abajo tienes el botón de “Donar con Paypal” (no hace falta que des tu número de la tarjeta, el botón te dirige a la página oficial de Paypal y desde su formulario puedes hacer la donación desde tu cuenta Paypal).

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

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



Mensajes: 956


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...


cron