Geek Answers Handbook

Hover words on hover only once

I am creating a kind of animated title for my homepage where I want the words to hang 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();

});

I got this random code in random order from css-tricks.com and its a bit quirky. When I hover over the title, it is too crazy to shuffle, and when I want to click the link, it somehow starts this function again:

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

What I want to achieve is to have only one change, when I find it, click on the link to go to the index, and the other when you re-click, etc.

Any clues?

+1
3

,

, span.

, event.currentTarget header, .

+1

one, , :

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

​​ fiddle.

+4

javascript ; , , a -tag . a -tag, padding:

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

0

More articles:


All Articles