pointless animated menu

by ZachWills

HTML

<a href="#">asdasdasdsad</a>

<div class="menu-holder">
    <div class="menu-item"></div>
    <div class="menu-item"></div>
    <div class="menu-item"></div>
    <div class="menu-item"></div>
    <div class="menu-item"></div>
    <div class="menu-item"></div>
    <div class="menu"></div>
</div>

CSS

* {
}
.menu {
    width:75px;
    height:75px;
    background:black;
    border-radius:100%;
    margin:auto;
    margin-top:150px;
    border:5px dashed red;
    cursor:pointer;
    z-index:99;
    box-sizing:border-box;
}
.menu.on {
    transition:all .5s ease-in-out;
    border:10px dashed red;
    -webkit-transform:rotate(359deg);
}
.menu-item {
    transition:all .2s ease;
}
.menu-item {
    position:absolute;
    width:25px;
    height:25px;
    background:black;
    top:40%;
    left:40%;
    border-radius:100%;
    z-index:-1;
    background:black;
}

.menu-item:hover {
    background:red;
}
.menu-holder {
    position:relative;
    width:75px;
    height:75px;
    left:50%;
}

JavaScript

$(".menu").click(function () {
    startLeft = 
        ( $(".menu-item").length / 2 ) 
        *
        ( $(".menu-item").width() * 1.5 )
        -     
        ( $(".menu").width()/2 )
        ;
    
    if ($(".menu").hasClass("on")) {
        $(".menu").removeClass("on");
        i = 0;
        $(".menu-item").each(function (index) {
            setTimeout(function () {
                $(".item-" + i).css({
                    left: $(".menu").width()/2,
                    top: $(".menu").height()/2
                });
                i++;
            }, 100 * index);

        });
    } else {
        $(".menu").addClass("on");
        i = 0;
        $(".menu-item").each(function (index) {
            $(this).addClass("item-" + index);
            setTimeout(function () {
                $(".item-" + i).css({
                    left: -startLeft + ($(".item-" + i).width() * i * 1.5),
                    top: $(".menu-holder").height()
                });
                i++;
            }, 100 * index);

        });
    }
});