Efectos Visuales delay jquery
delay() es un timer que ofrece un retardo entre los procesos que están en cola, ofreciendo vistocidad a determinados eventos ...
delay(tiempo);
En el siguiente ejemplo veremos con añadir retardos a los efectos que vamos añadiendo, en este caso se tratan de dos cajas que iran deteniéndose entre efecto y efecto dando así mayor vistocidad.
Haz click en el siguiente botón...
El código del ejemplo es el siguiente ...
<!-- By http://jquery-manual.blogspot.com -->
<!DOCTYPE HTML>
<html>
<head>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.2.min.js'></script>
<script type="text/javascript">
$(document).ready(function() {
$(":button#boton").click(function() {
$("#caja1").slideUp(1000).delay(1000).fadeIn(1000);
$("#caja2").slideUp(1000).delay(2000).fadeIn(1000).delay(500).slideUp(1000).delay(500).slideDown(1000);
});
});
</script>
</head>
<body>
<input type="button" id="boton" value="DELAY()">
<div id="caja1" style="width:50px; height:50px; background: green"></div>
<div id="caja2" style="width:50px; height:50px; background: red"></div>
</body>
</html>
No hay comentarios:
Publicar un comentario