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

De WikiEducator
Saltar a: navegación, buscar
(→‎Mostrar/Ocultar)
(→‎Mostrar/Ocultar)
Línea 15: Línea 15:
 
{{Actividad|
 
{{Actividad|
 
Title=Muestra u oculta una imagen
 
Title=Muestra u oculta una imagen
−
|<source lang=javascirpt>
+
|<source lang=javascript>
 
<!DOCTYPE html>
 
<!DOCTYPE html>
 
<html lang="en">
 
<html lang="en">

Revisión de 23:48 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




jQuery Effects jQuery Hide/Show jQuery Fade jQuery Slide jQuery Animate jQuery stop() jQuery Callback jQuery Chaining

=

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