Edit in JSFiddle

$('button').click(function() {
    $('div').each(function() {
        var anim = eval($(this).data('animation')),
            $div = $(this);
        $.each(anim, function(i) {
            $div.animate(anim[i], (3000*Math.max(Math.random())));
        });
    });
});

<div style="top:-50px;left:155px;" data-animation="[{left:-100},{top:30},{left:90},{top:30},{top:0},{left:0}]">P</div><!--
--><div style="top:90px;left:97px;" data-animation="[{left:100},{top:-50},{left:-30},{top:60},{top:0},{left:0}]">E</div><!--
--><div style="top:22px;left:-34px;" data-animation="[{left:-50},{top:60},{top:50},{left:90},{top:0},{left:0}]">R</div><!--
--><div style="top:83px;left:110px;" data-animation="[{left:50},{top:-60},{top:-10},{left:75},{top:0},{left:0}]">F</div><!--
--><div style="top:57px;left:-200px;" data-animation="[{left:-80},{left:50},{top:30},{left:0},{top:-40},{top:0}]">E</div><!--
--><div style="top:-34px;left:72px;" data-animation="[{left:120},{top:-60},{left:-70},{left:-100},{top:0},{left:0}]">C</div><!--
--><div style="top:-60px;left:-270px;" data-animation="[{left:-15},{top:70},{top:90},{left:0},{top:0}]">T</div>
<br><br><button>Click Me!</button>

body {
    padding:100px 30px;
    text-align:center;
}

div {
    position:relative;
    width:40px;
    height:40px;
    line-height:40px;
    text-align:center;
    background-color:black;
    color:white;
    display:inline-block;
    margin:0 5px 0 0;
}