仅将鼠标悬停在单词上一次 [英] Shuffle words on hover only once

问题描述

我正在为我的主页创建一种动画标题，我希望这些单词悬停并随机更改其水平位置.

I'm creating a sort of a animated header for my homepage where I want the words to hover and change their horizontal location randomly.

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获得了这个随机洗牌代码，这有点古怪.当我将鼠标悬停在标题上时，它会因洗牌而变得太疯狂了；当我想单击链接时，它又以某种方式再次触发了该功能:

I got this random shuffle code from css-tricks.com ands its a bit quirky. When I hover on the header it goes a little too crazy with the shuffleing and when i want to click on the link it somehow triggers the function again:

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

我想要实现的是，当我用鼠标输入它时，只有一个更改，单击链接以转到索引，而当我再次用鼠标输入等时，要更改另一个.

What I want to achieve is to have only one change when I mouseenter it, click on the link to get to the index, and another one when I mouseenter again etc.

有任何提示吗?

推荐答案

当我将鼠标悬停在标题上时，它会变得太疯狂了

When I hover on the header it goes a little too crazy

那是因为span元素也触发了该事件.

That's because the event gets fired for the span elements as well.

检查event.currentTarget是否是您的header元素，然后仅对范围进行随机排序.

Check if the event.currentTarget is your header element, and only shuffle the spans then.

这篇关于仅将鼠标悬停在单词上一次的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！