viernes, 18 de mayo de 2012

Efectos Visuales Jquery stop


Efectos Visuales Jquery stop

Con stop(), podemos detener la ejecución de una acción en un determinado punto, sin importar que la ejecución de código haya llegado a su fin.

Veamos un sencillo ejemplo, haz click en empezar, cuando empiece la animación haz click en stop ...
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, function(){
$("#caja").animate({width: "-=50", height: "-=50"}, 5000);
});
});
$(":button#stop").click(function(){
$("#caja").stop();
});
});
</script>
</head>
<body>
<input type="button" id="boton" value="Empezar">
<input type="button" id="stop" value="Stop">
<div id="caja" rel="queue" title="queue">Bienvenidos al Manual Jquery</div>
</body>
</html>