Попытка иметь вращающиеся круги - PullRequest
Новая
       2

Попытка иметь вращающиеся круги

0 голосов
/ 30 октября 2018

У меня есть пять кругов, которые я хочу вращать каждые пять секунд. например

первый раунд

1 2

3 4 5

5 секунд спустя

5 1

2 3 4

и т. Д.

Я хочу, чтобы это была анимация, чтобы вы могли визуально видеть, как элементы меняют положение.

Пять элементов расположены в два ряда: 2 сверху и пять снизу. Я в основном хочу, чтобы элемент 1 переместился на место элемента 2, а элемент 2 - на элемент 3 и так далее. Я хочу, чтобы он постоянно делал это, пока пользователь на странице. Я могу заставить это сделать момент один раз с кодом, который у меня есть ниже, однако на второй итерации элементы start не идут туда, куда должны, а просто начинают летать по всему экрану

Код, который у меня есть, отлично работает для первого интервала, но после этого элементы просто летают повсюду.

Вот мой JavaScript: 

window.onload = function(){
    $('#inst-container').trigger('inst.show');
}
$('#inst-container').on('inst.show', function(){
    setInterval(function(){
    gatherCoords();
    moveCircles();
    refreshRows();
    }, 5000);
})

function gatherCoords(){ 
    var circles = document.getElementById('inst-container').querySelectorAll('.inst-circle');   
    COORDINATES = []; 
    CIRCLES = [];
    $.each(circles, function(idx, elem){
        var coords = elem.getBoundingClientRect();
        var coords2 = idx == 0?circles[circles.length-1].getBoundingClientRect():circles[idx-1].getBoundingClientRect();
        //var coords2 = circles[map[idx]].getBoundingClientRect();
        var top = coords.top - coords2.top;
        var left = coords.left - coords2.left;
        COORDINATES.push({top: coords.top , left: coords.left});
        CIRCLES.push(elem);
    });
    console.log(circles);

   //$(this).trigger('inst.shown');

}
function moveCircles(){
    for(var i=0; i<CIRCLES.length; i++){
        var coords = CIRCLES[i].getBoundingClientRect();
        if(i==CIRCLES.length-1)
        {
            var top = COORDINATES[0].top -  coords.top;
            var left = COORDINATES[0].left - coords.left;
        }
        else{ 
            var top = COORDINATES[i+1].top -  coords.top;
            var left = COORDINATES[i+1].left - coords.left;
        }
        $(CIRCLES[i]).css('position', 'relative');
        $(CIRCLES[i]).animate({
            top: top,
            left: left
        }, 3000, 'swing', function(){
            $(CIRCLES[i]).css('position', 'static');
        });

    }
}

Вот мой HTML: 

 <head>
 <meta charset="UTF-8">
 <title>Untitled Document</title>
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"/>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
 </head>

 <div id="inst-container">
    <div class="row">
        <div class="text-center col-sm-4  col-sm-offset-2 inst-circle">
            <div class="circle-inner border-orange-sm initial fifty-five modal-circle" > Circle 1
            </div>
            <p>
                <strong>Circle 1 text</strong>
            </p>
        </div>
        <div class="text-center col-sm-4 inst-circle">
            <div class="circle-inner border-orange-sm initial fifty-five modal-circle" > Circle 2
            </div>
            <p>
                <strong>Circle 2 text</strong>
            </p>
        </div>
    </div>
    <div class="row">
        <div class="text-center col-sm-4  inst-circle">
            <div class="circle-inner border-orange-sm initial fifty-five modal-circle" > Circle 3
            </div>
            <p>
                <strong>Circle 3 text</strong>
            </p>
        </div>
        <div class="text-center col-sm-4  inst-circle">
            <div class="circle-inner border-orange-sm initial fifty-five modal-circle" > Circle 4
            </div>
            <p>
                <strong>Circle 4 text</strong>
            </p>
        </div>
        <div class="text-center col-sm-4 inst-circle">
            <div class="circle-inner border-orange-sm initial fifty-five modal-circle" > Circle 5
            </div>
            <p>
                <strong>Circle 5 text</strong>
            </p>
        </div>
    </div>
</div>

1 Ответ

0 голосов
/ 31 октября 2018

Пожалуйста, попробуйте следующий HTML и скрипт. Здесь я обновил ваш пример, и если вы дадите выравнивание с помощью CSS, указав position: absolute, тогда он будет работать хорошо.

HTML 

<div id="inst-container" style="position: relative">
    <div class="text-center col-sm-4 inst-circle">
        <div class="circle-inner border-orange-sm initial fifty-five modal-circle" > Circle 1
        </div>
        <p>
            <strong>Circle 1 text</strong>
        </p>
    </div>
    <div class="text-center col-sm-4 inst-circle">
        <div class="circle-inner border-orange-sm initial fifty-five modal-circle" > Circle 2
        </div>
        <p>
            <strong>Circle 2 text</strong>
        </p>
    </div>
    <div class="text-center col-sm-4 inst-circle">
        <div class="circle-inner border-orange-sm initial fifty-five modal-circle" > Circle 3
        </div>
        <p>
            <strong>Circle 3 text</strong>
        </p>
    </div>
    <div class="text-center col-sm-4 inst-circle">
        <div class="circle-inner border-orange-sm initial fifty-five modal-circle" > Circle 4
        </div>
        <p>
            <strong>Circle 4 text</strong>
        </p>
    </div>
    <div class="text-center col-sm-4 inst-circle">
        <div class="circle-inner border-orange-sm initial fifty-five modal-circle" > Circle 5
        </div>
        <p>
            <strong>Circle 5 text</strong>
        </p>
    </div>
</div>

Сценарий 

var COORDINATES = [];
var iteration=0;
window.onload = function(){
    gatherCoords();
    $('#inst-container').trigger('inst.show');
}
$('#inst-container').on('inst.show', function(){
    setInterval(function(){
        moveCircles(++iteration);
    }, 1000);
})

function gatherCoords(){ 
    var circles = document.getElementById('inst-container').querySelectorAll('.inst-circle');  
    var firstCirc = circles[0].getBoundingClientRect();
    $.each(circles, function(idx, elem){
        var nextCirc = elem.getBoundingClientRect();
        COORDINATES.push({top: nextCirc.top , left: nextCirc.left});
    });
    startAnimation(); // Here I've called this function in order init animation by making all divs as absolute
}
function startAnimation(){
    var circles = document.getElementById('inst-container').querySelectorAll('.inst-circle');   
    $.each(circles, function(i, elem){
        $(elem).css({
            "top": COORDINATES[i].top,
            "left": COORDINATES[i].left,
            "position": "absolute"
        });
    });
}
function moveCircles(count){
    var circles = document.getElementById('inst-container').querySelectorAll('.inst-circle'); 
    $.each(circles, function(index, elem){
        var i = count + index;
        var length = circles.length;
        if(i>=length)
        {
            i%= length;
        }
        var top = COORDINATES[i].top;
        var left = COORDINATES[i].left;
        $(elem).animate({
            top: top,
            left: left,
            complete: function(){
                $(circles).css('position', 'absolute');
            }
        }, 2000, 'swing');
    });
    if(iteration > circles.length){
        iteration%= circles.length;
    }
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...