Shuffle words on hover only once
<p>I'm creating a sort of a animated header for my homepage where I want the words to hover and change their horizontal location randomly.</p>

<p><strong>HTML</strong></p>

<pre><code>&lt;header&gt;
  &lt;a href="#"&gt;
    &lt;span&gt;One&lt;/span&gt; &lt;span&gt;100&lt;/span&gt; &lt;span&gt;Twenty&lt;/span&gt; &lt;span&gt;2000&lt;/span&gt;
  &lt;/a&gt;
&lt;/header&gt;
</code></pre>

<p><strong>jQuery</strong></p>

<pre><code>(function($){

 $.fn.shuffle = function() {

    var allElems = this.get(),
        getRandom = function(max) {
            return Math.floor(Math.random() * max);
        },
        shuffled = $.map(allElems, function(){
            var random = getRandom(allElems.length),
                randEl = $(allElems[random]).clone(true)[0];
            allElems.splice(random, 1);
            return randEl;
       });

    this.each(function(i){
        $(this).replaceWith($(shuffled[i]));
    });

    return $(shuffled);

};

})(jQuery);


$("header").mouseenter(function(){

     $('span').shuffle();

});
</code></pre>

<p>I got this random shuffle code from css-tricks.com ands its a bit quirky. When I hover on the header it goes a little too crazy with the shuffleing and when i want to click on the link it somehow triggers the function again:</p>

<p><strong>jsFiddle</strong>
<a href="http://jsfiddle.net/5CMCH/1/" rel="nofollow">http://jsfiddle.net/5CMCH/1/</a></p>

<p>What I want to achieve is to have only one change when I mouseenter it, click on the link to get to the index, and another one when  I mouseenter again etc.</p>

<p>Any hints?</p>
