Revisión de 01:48 7 abr 2016

Contenido

1 Programación web al lado del cliente
- 1.1 Mostrar/Ocultar
2 Muestra u oculta una imagen
3 Actividad
- 3.1 devaneciéndose o degradaciones : fade
4 Actividad
- 4.1 Modo presentación : slide
5 probando las presentaciones
- 5.1 animimaciones: animate y stop
6 Probando las animaciones
- 6.1 Anidando acciones
- 6.2 Concepto de funciones de callback
7 =

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

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

slow
fast
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

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()

fadeIn()

Hace que aparezca un elemento oculto con un cierto efecto

$(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);

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

$(selector).slideDown(speed,callback);
$(selector).slideUp(speed,callback);
$(selector).slideToggle(speed,callback);

probando las presentaciones

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script> 
$(document).ready(function(){
    $("#cabecera").click(function(){
     //Prueba aquí con las diferentes funciones de slide
    });
});
</script>
 
<style> 
#panel, #cabecera {
    padding: 5px;
    text-align: center;
    background-color: #e5eecc;
    border: solid 1px #c3c3c3;
}
 
#panel {
    padding: 50px;
}
</style>
</head>
<body>
 
<div id="cabecera">Haz un click aquí</div>
<div id="panel">Hello world!</div>
 
</body>

animimaciones: animate y stop

Con este método podemos crear animaciones personalizadas

$(selector).animate({params},velocidad,callback);

El parámetro params sigue la sintasix de css para especificar el cambio
Lo que va a ocurrir con este método es que el elemento seleccionado va a pasar a tener la nueva descripción de css con la velocidad marcada con el parámetro velocidad
Vamos a hacer una serie de ejemplos para verlo
Hay que tener en cuenta que por ejemplo para cabiar la posicón de un elemnto en el css ésta no puede ser estática (static), sino que debe de ser relative, fixed, o absolute

Probando las animaciones

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script> 
  //Aquí vamos a ir incluyendo para probar los ejemplos
</script> 
</head>
<body>
 
<button>Iniciar animación</button>
 
<p>Recuerda que para poder cambiar la posición de un elemnto, ésta no puede ser estática (static), sino que debe de ser  relative, fixed, o absolute</p>
 
<div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div>
 
</body>
</html>

Cambia la posición de un elemento

$("button").click(function(){
    $("div").animate({left: '250px'});
});

Cambia el tamaño de un elemento

$("button").click(function(){
    $("div").animate({
        left: '250px',
        opacity: '0.5',
        height: '150px',
        width: '150px'
    });
});

Cambia el tamaño del texto

Este caso insertamos un texto en el div

$("button").click(function(){
    var div = $("div");
    div.animate({left: '100px'}, "slow");
    div.animate({fontSize: '3em'}, "slow");
});

Podemos encadenar animaciones para que se ejecute una detras de otra

$(document).ready(function(){
    $("button").click(function(){
        var div = $("div");
        div.animate({height: '300px', opacity: '0.4'}, "slow");
        div.animate({width: '300px', opacity: '0.8'}, "slow");
        div.animate({height: '100px', opacity: '0.4'}, "slow");
        div.animate({width: '100px', opacity: '0.8'}, "slow");
    });
});

Anidando acciones

Concepto de funciones de callback

jQuery Callback jQuery Chaining

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

Revisión de 01:48 7 abr 2016

Programación web al lado del cliente

Contenido

Mostrar/Ocultar

Muestra u oculta una imagen

Actividad

devaneciéndose o degradaciones : fade

Actividad

Modo presentación : slide

probando las presentaciones

animimaciones: animate y stop

Probando las animaciones

Anidando acciones

Concepto de funciones de callback

=

Menú de navegación

Herramientas personales

Espacios de nombres

Variantes

Vistas

Acciones

Buscar

Navegación

Herramientas

Imprimir/exportar