encolar css con jquery queue
queue() nos permite encolar nuevas acciones, es decir ir modificando la evolución de una ejecución sin que esta se vea afectada.
Por ejemplo en algún momento de una ejecución de efectos nos podría interesar cambiar el color, color de fondo o el borde de una de nuestras cajas a través de las propiedades css, con queue podemos realizar esas acciones, e incluso detener una cola de efectos en una ejecución de efectos.
*dequeue() entra en acción en este código ya que sin este método la ejecución del código se dentendría en ese punto.
Veamos el siguiente ejemplo para comprenderlo mejor...
Bienvenidos al Manual Jquery
el código 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() {
$("#caja").css({
width: "200px",
height: "15px",
backgroundColor: "yellow",
borderStyle: "solid",
borderColor: "blue",
borderWidth: "3px",
fontFamily: "Verdana",
padding: "20px",
fontSize: "12px",
textAlign: "center",
color: "blue"
});
$(":button#boton").click(function(){
$("#caja").animate({width: "+=50", height: "+=50"}, 5000);
$("#caja").queue(function(){
$("#caja").css({color: "yellow", backgroundColor: "blue", borderColor: "yellow"});
$("#caja").dequeue();
});
$("#caja").animate({width: "-=50", height: "-=50"}, 5000);
$("#caja").queue(function(){
$("#caja").css({color: "blue", backgroundColor: "yellow", borderColor: "blue"});
$("#caja").dequeue();
});
});
});
</script>
</head>
<body>
<input type="button" id="boton" value="Empezar">
<div id="caja" rel="queue" title="queue">Bienvenidos al Manual Jquery</div>
</body>
</html>
No hay comentarios:
Publicar un comentario