CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Dave Smith
Dave Smith

Reputation: 307

Trying to have rotating circles

I have five circles that I want to rotate every five seconds. for example

first round

1 2

3 4 5

5 seconds later

5 1

2 3 4

and so on.

I want this to be an animation so you can visually see the elements change position.

The five elements are in two rows, 2 on the top and five on the bottom. I basically want element 1 to move to element 2's place and element 2 to move to element 3 and so on. I want it to continuously do this while a user is on the page. I can get it to do the moment once with the code I have below, however on the second iteration, the elements start do not go where the should and just start flying all across the screen

The code I have works great for the first interval, but after that the elements just fly all over the place.

Here is my 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');
        });

    }
}

Here is my 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>

Upvotes: 1

Views: 104

Answers (1)

Manikanta Chinta
Manikanta Chinta

Reputation: 151

Please try with the following HTML and Script. Here I've updated your example and if you give your alignment using CSS by giving position: absolute then it works well.

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>

Script

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

Upvotes: 1

Related Questions