El método fadeTo es bastante más versátil, como ya se había adelantado. Para hacer un ejemplo interesante con este método
tenemos que ver cómo se le pueden pasar distintos valores de opacidad y para ello hemos creado un campo select con
distintos valores.
<select name="opacidad" id="selopacidad">
<option value="0.2">20%</option>
<option value="0.5">50%</option>
<option value="0.8">80%</option>
<option value="1">100%</option>
</select>
Como se puede ver, este SELECT tiene diferentes OPTION con algunos valores de opacidad. Los valores (atributos value
de los OPTION) son números entre 0 y 1. Ahora vamos a mostrar el código de un evento que asociaremos a este campo
SELECT, para ejecutar acciones cuando el usuario cambia el valor que aparece en él. Cuando el SELECT cambie, queremos
actualizar el valor de opacity de los elementos H1 de la página.
$("#selopacidad").change(function(e){
var opacidad_deseada = e.target.options[e.target.selectedIndex].value
$("h1").fadeTo(1000,opacidad_deseada);
});
En este código estamos definiendo un evento "onchange" sobre el SELECT anterior. En la primera línea de la función se
está extrayendo la opacidad deseada y para ello se accede a la propiedad target del objeto evento que se recibe en la función
que enviamos al método change().
Nota: en el objeto evento, target es una referencia al objeto del DOM sobre el que se está codificando el evento.
Es decir, en este ejemplo, e.target es una referencia al campo SELECT sobre el que estamos definiendo el evento. Con e.target.options[] tengo el array de options que hay dentro de ese SELECT.
Con e.target.selectedIndex obtengo el índice del elemento seleccionado, para poder acceder a la opción seleccionada a través del array de
options.
Con e.target.options[e.target.selectedIndex].value estamos accediendo a la propiedad value del OPTION que se encontraba seleccionado. Así
accedemos a la opacidad deseada que queríamos aplicar.
Una vez tenemos esa opacidad deseada, recogida del value del OPTION seleccionado, podemos ver la siguiente línea de
código, en la que hacemos el fadeTo().
Veamos que fadeTo() recibe en principio dos métodos. El primero es la duración en milisegundos del ejemplo. El segundo
es el valor de opacidad que queremos aplicar
No hay comentarios:
Publicar un comentario