仅在悬停时一次性打乱单词。
仅在悬停时一次性打乱单词。
我正在为我的主页创建一种动画式的标题，我希望文字能悬停并随机改变其水平位置。
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获得了这个随机洗牌代码，它有点古怪。当我在标题上悬停时，洗牌有点太疯狂了，当我想点击链接时，它会再次触发该函数：
jsFiddle
我想实现的是，当我鼠标进入时只改变一次，点击链接进入主页，再次鼠标进入时再次改变等等。
有什么提示吗？
原因：问题出现的原因是事件被多次触发，因为在洗牌过程中，a标签的区域发生了变化。
解决方法：可以尝试给a标签添加一些样式，例如padding。
文章内容如下：
你的javascript代码看起来没问题；
看起来事件被多次触发是因为在洗牌过程中，a标签的区域发生了变化。你可以尝试给a标签添加一些样式，比如padding：
问题的原因是希望在鼠标悬停在标题上时，只触发一次洗牌效果，但希望每次洗牌效果都不同。目前的解决方法只能在页面刷新后重新触发洗牌效果。
为了解决这个问题，可以使用jQuery的one函数，它可以只触发一次事件并且在触发后移除事件处理程序。可以将以下代码添加到页面中：
$("header").one('mouseenter', function(e){
e.stopPropagation()
$('span').shuffle();
});
这样，当鼠标悬停在标题上时，洗牌效果将只触发一次，并且使用e.stopPropagation()来阻止事件冒泡，以防止其他事件的干扰。
如果希望每次悬停都触发洗牌效果，并且每次效果都不同，可以尝试使用Klasman的解决方法。然而，需要注意的是，该方法可能会导致页面布局混乱的问题。
