Всем хорошего времени суток !
Возникла одна задача, которую никак не могу решить
Вот пример кода:
<div>
<p class="img"><img src="http://lorempixel.com/30/30/city">
<button class="move">Переместить</button>
</p>
</div>
<div>
<p class="img"><img src="http://lorempixel.com/30/30/technics">
<button class="move">Переместить</button>
</p>
</div>
<div class="icon-right"><i class="fa fa-tags" aria-hidden="true"></i></div>
$('.moved-item').css({"display": "block", 'top' : offset.top-window.scrollY + 'px', 'left' : offset.left + 'px'}).animate({'top': icon.offset().top-window.scrollY-30, 'left': icon.offset().left + 20}, 700,
function(){ $('.moved-item').css({'top' : icon.offset().top-window.scrollY-30 + 'px', 'left' : icon.offset().left + 20 + 'px'}).animate({'top': icon.offset().top-window.scrollY, 'left': icon.offset().left + 20}, 500,
function(){ $(this).remove(); }) }
);
Более наглядный пример этого кода:
https://codepen.io/Genri_Rus/pen/mYwdmj
Задача следующая - на основе данного примера сделать эффект слежения
Сама задача:
чтобы сделать эффект слежения нужно вынести этот код в функцию с итератором и запускать через таймаут по шагу времени
setTimeout(function(i){...}.bind(i+1), 200)
при этом значения top и left рассчитывать не окончательные, а относительно итерации i и общего числа итераций n
offset.top + (offset.top - (icon.offset().top-window.scrollY-30))*i/n
Может кто-то знает - как правильно нужно реализовать данную задачу ?
