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的更新版本。

Answer 2

当我将鼠标悬停在标题上时，它会变得有些过于疯狂

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

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

Answer 3

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

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

只悬停一次的随机单词

3 个答案: