只在悬停时随机播放单词一次答案

【问题标题】：Shuffle words on hover only once只在悬停时随机播放单词一次
【发布时间】：2013-05-24 17:04:54
【问题描述】：

我正在为我的主页创建一种动画标题，我希望文字悬停在其中并随机更改它们的水平位置。

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/

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

有什么提示吗？

【问题讨论】：

标签： javascript jquery

【解决方案1】：

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

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

fiddle 的更新版本。

【讨论】：

就是这样，但还要添加e.stopPropagation()以防止疯狂。 Fiddle here
好的。这是有道理的，但它只会触发一次，如果 id 想再次随机播放，我必须刷新页面。我想做这样的事情：进，出，进……而且每次都发生变化。我尝试了 Klasman 的答案，它有点工作，但是当我将鼠标悬停在标题上时，内联块会使页面变得一团糟。

【解决方案2】：

当我将鼠标悬停在标题上时，它有点太疯狂了

那是因为span 元素也会触发该事件。

检查event.currentTarget 是否是您的header 元素，然后只打乱跨度。

【讨论】：

【解决方案3】：

您的 javascript 似乎没问题；看起来事件被触发了很多次，因为a-tag 的区域在随机播放期间发生了变化。您可以尝试为a-tag 添加一些样式，例如填充：

http://jsfiddle.net/5CMCH/2/

【讨论】：