javascript - 仅在悬停时随机播放单词一次

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/

我想要实现的是当我用鼠标输入时只有一个变化，点击链接进入索引，当我再次用鼠标输入时再有一个变化等等。

有什么提示吗？

Answer 1

您可以使用 one函数，它只触发一次事件，然后删除处理程序:

$("header").one('mouseenter', function(e){
    e.stopPropagation()
    $('span').shuffle();
});

您的 fiddle 的更新版本.