Остановка и продление анимации
Подскажите пожалуйста как можно манипулировать анимацией. Например:
slider_line_1.animate({
marginLeft: margin_line_1
},500, 'linear', function(){
// something
});
вот такая анимация которую нужно останавливать, STOP работает отменно, но вот как возобновить анимацию с места остановки. То есть slider_line_1 сместился влево на 399 и остановился, а когда я перезапускаю функцию анимации, то он начинает продвигать с места остановки на 500, а не с 399 до 500, а потом снова на 500. (Это очевидно, но все же.) Первая мысль самому расчитывать остаток пути и время и вспомогательной функцией дотягивать, а потом запускать первую, но уверен что это уже где то и кем то решено. Спасибо за помощь. |
Цитата:
<!DOCTYPE html>
<html>
<head>
<style>div {
position: absolute;
background-color: #abc;
left: 0px;
top:30px;
width: 60px;
height: 60px;
margin: 5px;
}
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<button id="go">Go</button>
<button id="stop">STOP!</button>
<button id="back">Back</button>
<div class="block"></div>
<script>
$("#go").click(function(){
$(".block").animate({left: '500px'}, 2000);
});
$("#stop").click(function(){
$(".block").stop().html($(".block").offset().left);
});
$("#back").click(function(){
$(".block").animate({left: '0px'}, 2000);
});
</script>
</body>
</html>
|
Разные скорости которые заметны особенно после 400 пикселя. То есть я запускаю анимацию -> она доходит до 400 пикселя и идет -> я останавливаю -> я запускаю и дотягивается она уже не с первоначальной скоростью что хотелось бы избежать.
То есть грубо говоря так: пройти надо 1000 px за 10 сек. анимация остановлена на 500px когда она продолжается то остаток в 500px должен быть пройден за то же время что и первый отрезок К сожалению когда остановка идет на 343.4578 считать сложнее да и хотелось бы избежать этого. |
Цитата:
см параметр : linear Если не устроит, то делать линейную анимацию через setInterval |
Duda.Ml1986@gmail.com,
Вариант с одинаковой скоростью ...
<!DOCTYPE html>
<html>
<head>
<style>
div {
position: absolute;
background-color: #abc;
left: 0px;
top:30px;
width: 60px;
height: 60px;
margin: 5px;
}
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<button id="go">Go</button>
<button id="stop">STOP!</button>
<div class="block"></div>
<script>
var time, duration = 10000;
$("#go").click(function () {
time = new Date();
$(".block").animate({
left: '500px'
}, duration, function () {
duration = 10000;
});
});
$("#stop").click(function () {
time = (new Date()).getTime() - time.getTime();
duration -= time
$(".block").stop().html(duration);
});
</script>
</body>
</html>
|
Цитата:
выходом было бы добавить плагин для анимации (или вообще другой фреймворк скачать для неё), или же сделать костыльным способом через setInterval |
| Часовой пояс GMT +3, время: 09:35. |