Diferencia entre revisiones de «Usuario:ManuelRomero/JavaScript/jquery/efectos»

De WikiEducator
Saltar a: navegación, buscar
Línea 65: Línea 65:
 
Modifica el ejercico anterior para que se realice en un tiempo y que luego se muestre un alert diciendo que la imagen se ha mostrado u ocultado}}
 
Modifica el ejercico anterior para que se realice en un tiempo y que luego se muestre un alert diciendo que la imagen se ha mostrado u ocultado}}
 
===devaneciéndose o degradaciones : fade====
 
===devaneciéndose o degradaciones : fade====
 +
*Con la bibliteca JQuery se puede hacer que los elementos desaparezcan y aparezcan como desvaneciéndose o degradándose
 +
*Para este comentido tenemos 4 métodos según se exponen a continuación
 +
<source lang=javascript>
 +
fadeIn()
 +
fadeOut()
 +
fadeToggle()
 +
fadeTo()
 +
<source>
 +
;fadeIn()
 +
*Hace que aparezca un elemento oculto con un cierto efecto
 +
<source lang = javascript>
 +
$(selector).fadeIn(speed,callback);
 +
<source>
 +
;fadeOut()
 +
*Tiene el efecto contrario (el de desaparecer desvaneciéndose) un elemento de html
 +
<source lang = javascript>
 +
$(selector).fadeOut(speed,callback);
 +
<source>
 +
{{Actividad|Dibuja tres elementos con un color de fondo y haz que aparezcan y desaparezcan con botones correspondientes usando las funciones de fada
 +
<source lang=html5>
 +
<!DOCTYPE html>
 +
<html>
 +
<head>
 +
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
 +
<script>
 +
//Escribe aquí el código
 +
</script>
 +
</head>
 +
<body>
 +
 +
<p>Mostrando la función  fadeOut() fadeIn() modifinando los parámetros.</p>
 +
 +
<button id=muestra>Muestra</button>
 +
<button id=oculta>Oculta</button>
 +
 +
 +
<div id="div1" style="width:80px;height:80px;background-color:red;"></div>
 +
<div id="div2" style="width:80px;height:80px;background-color:green;"></div>
 +
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>
 +
 +
</body>
 +
</source>
 +
}}
 +
;fadeToggle()
 +
*Esta función tiene la característica de si ir intercambiando fadeIn y fadeOut alternativamente (Si está oculto, lo muestra, si está mostrado lo oculta
 +
*En este caso el método no puede recibir funciones como el método '''''toggle()'''''
 +
<source lang=javascript>
 +
$(selector).fadeToggle(speed,callback);
 +
</source>
 +
{{Actividad
 +
|Modifica el ejemplo anterior para hacerlo usando un solo botón y gestionando las acciones con el método '''''fadeToggle()'''''}}
 +
;fadeTo()
 +
*Este método admite un parámetro de opacidad.
 +
*Este parámetro, que toma un valor entre 0 (totalmente transparente) y 1 (totalmente opaco), permite realizar un degradado parcial del elemento.
 +
*Si no queremos que presenten ningún retardo (primero parámetro), debemos de poner un 0
 +
*En este caso obligatoriamente hay que usar al menos dos parámetros
 +
<source lang=javascript>
 +
$(selector).fadeTo(velocidad,opacidad,funcion_callback);
 +
</source>
 
====Modo presentación : slide====
 
====Modo presentación : slide====
 +
*Estos métodos permiten visualizar elementos (suelen ser imágenes) a modo de presentaciones
 +
*Tenemos tres métodos que podemos intuir su funcionamiento
 +
{{Actividad|
 +
Title=}}
 +
<>
 +
 
====animimaciones: animate y stop====
 
====animimaciones: animate y stop====
 
====Anidando acciones====
 
====Anidando acciones====

Revisión de 12:21 6 abr 2016



  • Los efectos son acciones que queremos realizar sobre un elemento seleccionado
  • La sintaxis sigue la básica de jquery 
$(seleccion).accion()
  • Vamos a ver distintos tipos de efectos, las posibilidades son enormes

Mostrar/Ocultar

$(seleccion).hide(time, callback)
$(seleccion).show(time, callback)
  • Los parámetros time y callback son opcioneles


Icon activity.jpg

Muestra u oculta una imagen

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script>
    < script type = 'text/javascript'
    src = "//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" >
    </script>
    <script type="text/javascript">
    $(document).ready(activa);
 
    function activa () {
        $("#muestra").click(muestra);
        $("#oculta").click(oculta);
    }
 
    function muestra(){
    	$("img").show();
    }
    function oculta(){
    	$("img").hide();
    }
    </script>
</head>
 
<body>
    <h1>Mostrando u ocultando imágenes</p>
    <button id="muestra">Muestra </button>
    <button id="oculta">Oculta</button>
    <br />
    <img src="naturaleza.jpg" alt="">
</body>
</html>




parámetros opicones
El primer parámetros especifica el tiempo en el cual ocurre la acción
Valores
  1. slow
  2. fast
  3. un entero que especifica el tiempo en milisegundos
El segundo parámetro es una función que se ejecutará cuando haya terminado la acción


Icon activity.jpg

Actividad

Modifica el ejercico anterior para que se realice en un tiempo y que luego se muestre un alert diciendo que la imagen se ha mostrado u ocultado



devaneciéndose o degradaciones : fade=

  • Con la bibliteca JQuery se puede hacer que los elementos desaparezcan y aparezcan como desvaneciéndose o degradándose
  • Para este comentido tenemos 4 métodos según se exponen a continuación 
 fadeIn()
 fadeOut()
 fadeToggle() 
 fadeTo() 
<source>
;fadeIn()
*Hace que aparezca un elemento oculto con un cierto efecto
<source lang = javascript>
$(selector).fadeIn(speed,callback);
<source>
;fadeOut()
*Tiene el efecto contrario (el de desaparecer desvaneciéndose) un elemento de html
<source lang = javascript>
$(selector).fadeOut(speed,callback);
<source>
{{Actividad|Dibuja tres elementos con un color de fondo y haz que aparezcan y desaparezcan con botones correspondientes usando las funciones de fada
<source lang=html5>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
//Escribe aquí el código
</script>
</head>
<body>
 
<p>Mostrando la función  fadeOut() fadeIn() modifinando los parámetros.</p>
 
<button id=muestra>Muestra</button>
<button id=oculta>Oculta</button>
 
 
<div id="div1" style="width:80px;height:80px;background-color:red;"></div>
<div id="div2" style="width:80px;height:80px;background-color:green;"></div>
<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>
 
</body>

}}

fadeToggle()
  • Esta función tiene la característica de si ir intercambiando fadeIn y fadeOut alternativamente (Si está oculto, lo muestra, si está mostrado lo oculta
  • En este caso el método no puede recibir funciones como el método toggle() 
$(selector).fadeToggle(speed,callback);


Icon activity.jpg

Actividad

Modifica el ejemplo anterior para hacerlo usando un solo botón y gestionando las acciones con el método fadeToggle()



fadeTo()
  • Este método admite un parámetro de opacidad.
  • Este parámetro, que toma un valor entre 0 (totalmente transparente) y 1 (totalmente opaco), permite realizar un degradado parcial del elemento.
  • Si no queremos que presenten ningún retardo (primero parámetro), debemos de poner un 0
  • En este caso obligatoriamente hay que usar al menos dos parámetros 
$(selector).fadeTo(velocidad,opacidad,funcion_callback);

Modo presentación : slide

  • Estos métodos permiten visualizar elementos (suelen ser imágenes) a modo de presentaciones
  • Tenemos tres métodos que podemos intuir su funcionamiento


Icon activity.jpg

{{{1}}}



<>

animimaciones: animate y stop

Anidando acciones

Concepto de funciones de callback

jQuery Callback jQuery Chaining

=

Obtenido de «https://es.wikieducator.org/index.php?title=Usuario:ManuelRomero/JavaScript/jquery/efectos&oldid=19303»