javascript - ホバーで単語を 1 回だけシャッフルする

Question

ホームページ用に一種のアニメーション化されたヘッダーを作成しています。ここでは、単語をホバーして水平方向の位置をランダムに変更します。

HTML

<header>
  <a href="#">
    <span>One</span> <span>100</span> <span>Twenty</span> <span>2000</span>
  </a>
</header>

jQuery

(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();

});

css-tricks.com からこのランダム シャッフル コードを取得しましたが、これは少し風変わりです。ヘッダーにカーソルを合わせると、シャッフルで少しおかしくなりすぎて、リンクをクリックしたいときに、どういうわけか関数が再びトリガーされます。

jsFiddle http://jsfiddle.net/5CMCH/1/

私が達成したいのは、マウスを入力したときに1つの変更のみを行い、リンクをクリックしてインデックスにアクセスし、マウスを再度入力したときに別の変更を行うことです。

ヒントはありますか？