Circles Menu - Path Expanding on hover

http://stackoverflow.com/a/28498867/1654265

by AndreaLigios

HTML

<div class="wrap">
    <div class="circle">1</div>
    <div class="circle">2</div>
    <div class="circle">3</div>
    <div class="circle">4</div>
</div>
<br>
<div class="wrap">
    <div class="circle">1</div>
    <div class="circle">2</div>
    <div class="circle">3</div>
    <div class="circle">4</div>
    <div class="circle">5</div>
</div>
<br>
<div class="wrap">
    <div class="circle">1</div>
    <div class="circle">2</div>
    <div class="circle">3</div>
    <div class="circle">4</div>
    <div class="circle">5</div>
    <div class="circle">6</div>
</div>

CSS

.wrap{
    height:300px;
    width:300px;
    background:red;
    position:relative;
    transform-origin: center center;
    transition:all 0.8s;
}
.circle {
    transition:all 0.8s;
    position:absolute;
    height:50px;
    width:50px;
    text-align: center;
    line-height: 50px;
    top: calc(50% - 25px);
    left: calc(50% - 25px);
    background:tomato; 
    border-radius: 50%;
}

JavaScript

+function() {
    var to;
    $(".wrap").on('mouseenter', function(){
        var circles = $(this).children();
        var degree = (2 * Math.PI) / circles.length; //calc delta angle
        var transforms = [];
    
        // Calculate the position for each circle
        circles.each(function (index) {
            var x = 100 * Math.cos(-0.5 * Math.PI + degree * (-1 * index - 0.5));
            var y = 100 * Math.sin(-0.5 * Math.PI + degree * (-1 * index - 0.5));
            
            transforms.push('translate(' + x + 'px,' + y + 'px)');
        });
        
        // Function to moves all the circles
        // We'll pop a circle each time and than call this function recursively
        function moveCircles() {
            var transform = transforms.shift();
            circles.css('transform', transform);
            
            circles.splice(0,1);
            if (circles.length) to = setTimeout(moveCircles, 400);
        }
        
        moveCircles();
    });
    
    $(".wrap").on('mouseleave', function(){
        var circles = $(this).children().css('transform', '');
        clearTimeout(to);
    });
}();