Я пытаюсь переместить набор различных div, для этого я сделал function, чтобы совершить бесконечное движение в пространстве.Теперь я хочу поместить различные div в своего рода сетку, чтобы классифицировать их.Иногда он запускается, но не останавливает function, и когда каждый div помещается, он продолжает двигаться.Чего я не хочу (без использования библиотеки, такой как Particle.js), так это чтобы она постоянно двигалась, но когда я нажимаю, она мгновенно останавливает div и бежит из их положения в сетку, а по второму щелчку - изсетка для функции.
Я пишу это на jsFiddle
Вот Jquery:
$(document).ready(function(){
function move() {
$('div').each(function(){
var top = $(this).css('top');
var left = $(this).css('left');
var topEnd = $(this).data('top-end');
var leftEnd = $(this).data('left-end');
$(this).animate({
left: leftEnd,
top: topEnd
}, 3000).animate({
left: left,
top: top
}, 3000,move);
}
)}
move();
$('button').click(function(){
$('div').each(function(){
var position = $(this).position();
var gridTop = $(this).data('grid-top');
var gridLeft = $(this).data('grid-left');
var topEnd = $(this).data('top-end');
var leftEnd = $(this).data('left-end');
if(position.top == gridTop ){
$(this).animate({
left: leftEnd,
top: topEnd
}, 2000);
} else {
$(this).animate({
left: gridLeft,
top: gridTop
}, 2000);
}
});
});
});
А вот и HTML:
<button>click moi</button>
<div data-grid-left="10px" data-grid-top="130px" data-left-end="250px" data-top-end="250px" style="background:green;left:-50px;"></div>
<div data-grid-left="130px" data-grid-top="10px" data-left-end="350px" data-top-end="-50px" style="background:red;top:200px;left:-200px;"></div>
<div data-grid-left="130px" data-grid-top="130px" data-left-end="500px" data-top-end="100px" style="background:blue;top:400px;left:-100px;"></div>