只hover一次的随机单词

我正在为我的主页创建一种动画标题，我想让这些单词hover并随机改变它们的水平位置。

HTML

  One 100 Twenty 2000   

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获得了这个随机的shuffle代码，它有点古怪。 当我将鼠标hover在标题上时，它会因为随机播放而变得有点过于疯狂，当我想点击链接时它会以某种方式再次触发该function：

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

我想要实现的是当我鼠标进入时只进行一次更改，单击链接以获取索引，再次鼠标输入时再单击一次等。

任何提示？

Answer 1

当我在标题上盘旋时，它有点太疯狂了

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

检查event.currentTarget是否是您的header元素，然后只调整spans。

Answer 2

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

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

你小提琴的更新版本。

Answer 3

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

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