Перемешать слова при наведении только один раз

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 ANDS его немного изворотливый. Когда я наведении на заголовок он идет немного слишком сумасшедшим с shuffleing и когда я хочу, чтобы нажать на ссылку, что-то вызывает функцию снова:

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

То, что я хочу, чтобы достичь является чтобы иметь только одно изменение, когда я нахожу его, щелкните по ссылке, чтобы перейти к индексу, а другой - когда я снова запустил мышь и т. д.

Любые подсказки?

Answer 1

Когда я парить на заголовок он идет немного слишком сумасшедшим

Это потому, что событие увольняют за span элементов, а также.

Проверьте, является ли event.currentTarget вашим элементом header, и только тогда перетасовывайте промежутки.

Answer 2

Вы можете использовать функцию one, она запускает событие только один раз, а затем удаляет обработчик:

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

Изменено версию fiddle.

Answer 3

Ваш javascript кажется прекрасным; Похоже, что событие срабатывает много раз, потому что область a -tag изменяется во время тасования. Вы можете попробовать добавить некоторые стили к a в тег, как обивка:

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