Shuffle & Hover animation

by techsin

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="nums">1</div>
<div class="nums">2</div>
<div class="nums">3</div>
<div class="nums">4</div>
<div class="nums">5</div>
<br>
<button>Shuffle!</button>

CSS

.nums {
    display: inline-block;
    border:1px solid #ddd;
    height: 200px;
    width: 100px;
    line-height: 200px;
    background-color: #eee;
    text-align: center;
    font-size: 35px;
    font-family: "helvetica";
    transform-origin: top left;
}

button {
    margin-top:30px;
    padding: 5px;
}

.nums:hover {
    animation: boxrotate .4s ease-in-out infinite alternate;
}


@keyframes boxrotate {
        0% { transform: rotate(0deg);}
        100% { transform: rotate(10deg); }
}

JavaScript

var arr = [1,2,3,4,5];


$('button').click(clicked);


function clicked() {
    shuffle(arr);
    update();
}

function update(){
    $('.nums').each(function(i){
        $(this).text(arr[i]);
    });
}

function shuffle (arr) {
   arr.forEach(function(e,i){
       var rand = ~~(Math.random()*(arr.length-1));
       arr[i] = arr[rand];
       arr[rand] = e;
   });
}