Как вовремя остановить анимацию
Здравствуйте, уважаемые.
Перейду сразу к делу
setTimeout(function(){
doSomething();
/**Условие остановки*/ setTimeout(arguments.callee, 1000);
}, 1000)
Нужно создать бесконечную анимацию, останавливающуюся и запускающуюся по нажатию кнопки. Если делать плавную анимацию, то вполне сойдет обращение какого нибудь флага при клике по кнопке и проверка его в месте условия остановки, но у меня анимация "рывками", и когда я нажимаю подобную кнопку, проходит еще один кадр анимации, так как setTimeout уже ждет времени своего срабатывания, что недопустимо в моем случае. setInterval/clearInterval подошел бы идеально, если бы не варьирующаяся длина кадра (в примере 1000, но на деле что-то вроде getInterval()). Подскажите пожалуйста, какие есть способы мгновенно остановить анимацию такого типа? Или, возможно ли как-то подобное осуществить через setInterval? |
<script type="text/javascript">
window.onload = function(){
var i = 0;
document.getElementById('a').onclick = function(){
if(i>0) {
i = 0;
window.clearTimeout(timer);
return false;
}
(function(){
document.getElementById('span').style.left = ++i<200 ? i+'px' : i = 0;
timer = window.setTimeout(arguments.callee, 10);
})();
return false;
};
}
</script>
<style type="text/css">
a {display: block; position: relative;}
div {
border: 1px dotted #DDD;
position: absolute;
overflow: hidden;
top: 50px;
width: 500px;
height: 50px;
}
span {
background: blue;
position: absolute;
color: white;
text-align: center;
width: 50px;
height: 50px;
}
</style>
<div>
<span id="span">Text</span>
</div>
<a href="#" id="a">click</a>
|
monolithed,
Спасибо большое! Суть ясна :) |
| Часовой пояс GMT +3, время: 22:25. |