jquery ¿Hay alguna manera de iniciar una animación y detenerla usando el mismo botón?
js:
$('<div>').css({ 'width':'200px', 'height':'200px', 'background':'red' }).appendTo('body') $('<button>').appendTo('body').text('Click').click(function(){ $('div').animate({ 'height': '250px' }) }) $('button').on('click',function(){ $('div').animate({'height':'350px'}) })Mira este código;
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <style type="text/css"> div { background-color: #ffeecc; width: 100px; height: 100px; } </style> <script type="text/javascript"> $(function () { var starts = false; $("#btnStart").click(function () { if (!starts) { start(); } else { stop(); } }); function start() { starts = true; $("#btnStart").val("Stop"); $("#divOne").animate( { width: "200px", height: "300px", }, 5000 ); } function stop() { starts = false; $("#btnStart").val("Start"); $("#divOne").stop(); } }); </script> <input id="btnStart" type="button" value="Start" /> <br/><br/> <div id="divOne" />