Форум

Duda.Ml1986@gmail.com · #1 (**permalink**) 13.06.2013, 18:30

Подскажите пожалуйста как можно манипулировать анимацией. Например:

slider_line_1.animate({
   		 marginLeft: margin_line_1
		  },500, 'linear', function(){
			// something
			});

вот такая анимация которую нужно останавливать, STOP работает отменно, но вот как возобновить анимацию с места остановки. То есть slider_line_1 сместился влево на 399 и остановился, а когда я перезапускаю функцию анимации, то он начинает продвигать с места остановки на 500, а не с 399 до 500, а потом снова на 500. (Это очевидно, но все же.)

Первая мысль самому расчитывать остаток пути и время и вспомогательной функцией дотягивать, а потом запускать первую, но уверен что это уже где то и кем то решено. Спасибо за помощь.

рони · #2 (**permalink**) 13.06.2013, 18:58

Сообщение от 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>

<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>

Duda.Ml1986@gmail.com · #3 (**permalink**) 13.06.2013, 19:08

Разные скорости которые заметны особенно после 400 пикселя. То есть я запускаю анимацию -> она доходит до 400 пикселя и идет -> я останавливаю -> я запускаю и дотягивается она уже не с первоначальной скоростью что хотелось бы избежать.

То есть грубо говоря так:

пройти надо 1000 px за 10 сек.
анимация остановлена на 500px
когда она продолжается то остаток в 500px должен быть пройден за то же время что и первый отрезок

К сожалению когда остановка идет на 343.4578 считать сложнее да и хотелось бы избежать этого.

Deff · #4 (**permalink**) 13.06.2013, 19:13

Сообщение от Duda.Ml1986@gmail.com

Разные скорости которые заметны особенно после 400 пикселя. То есть я запускаю анимацию -> она доходит до 400 пикселя и идет -> я останавливаю -> я запускаю и дотягивается она уже не с первоначальной скоростью что хотелось бы избежать.

http://jquery-docs.ru/Effects/animat...easingcallback
см параметр : linear
Если не устроит, то делать линейную анимацию через setInterval

рони · #5 (**permalink**) 13.06.2013, 20:03

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>

melky · #6 (**permalink**) 13.06.2013, 22:06

Сообщение от Duda.Ml1986@gmail.com

Разные скорости которые заметны особенно после 400 пикселя. То есть я запускаю анимацию -> она доходит до 400 пикселя и идет -> я останавливаю -> я запускаю и дотягивается она уже не с первоначальной скоростью что хотелось бы избежать.

То есть грубо говоря так:

пройти надо 1000 px за 10 сек.
анимация остановлена на 500px
когда она продолжается то остаток в 500px должен быть пройден за то же время что и первый отрезок

К сожалению когда остановка идет на 343.4578 считать сложнее да и хотелось бы избежать этого.

jQuery не разрешает манипулировать анимацией после её старта - либо остановить, либо запустить с нуля.

выходом было бы добавить плагин для анимации (или вообще другой фреймворк скачать для неё), или же сделать костыльным способом через setInterval

Форум

Справочник

Discord чат

Курсы javascript