JQuery Animations Messy

Question

Итак, я пытаюсь закодировать эту навигацию и все это работает, за исключением того, что иногда анимация JQuery ломается или прыгает, если вы слишком быстро перемещаете мышь. В Safari это выглядит довольно ужасно, похоже, почти мигает анимация?

$(document).ready(function() { 

    // On hover: 
    $('#navigation li').hoverIntent(function() { 
     width = $(this).children('span:nth-child(2)').width(); 
     text = $(this).children('span:nth-child(2)');   

     var newwidth = (width + 15) // Original width + 15px padding   
     text.animate({"width":"0px"}, 0).show(); // Make the width 0px and make the element visible 
     text.animate({"width":+newwidth+"px"}, 300); // Animate the width to the new size 

    }, 
    function() { 
     text.animate({"width":"0px"}, 300); // Animate the width to 0px and hide the element 
     text.animate({"width":+width+"px","float":"left"}, 0); 
     setTimeout(function() { 
      text.hide(); 
     }, 300); 
    }); 

}); 

Вот JFiddle его:

http://jsfiddle.net/d8g4w/

Кроме того, предварительный просмотр, так что вы можете увидеть, что это на самом деле выглядит следующим образом:

http://dev.evaske.com/Navigation/

Answer 1

Посмотрите, что это делает для вы: jsFiddle

С самого начала я заметил, что разметка не была действительной на 100% (якорные метки в качестве непосредственных детей узла ul), и анимация свойства «float» была немного странной для меня (я даже не уверен, что jQuery поддерживает анимацию «float»). Я удалил некоторые из кросс-браузерных объявлений CSS (которые, похоже, не имели никакого отношения к анимации). Вам не нужны теги привязки, поскольку вы обрабатывали курсор с помощью CSS и наведите курсор с помощью комбинации CSS и JS. Если вам нужно вызвать из щелчку мыши (который, если это навигация, я уверен, что вы будете) я рекомендую использовать:

$('#navigation li').on('click', function(){...}

Я склонен избегать использования .hover() и вместо того, чтобы больше полагаться на

.on('mouseenter', function(){...}) и .on('mouseleave', function(){...})

, поскольку они более точно отражают фактические события я обычно пытаюсь предназначаться.

Возможно, наибольшее улучшение произошло от инъекции метода .stop() до .animate(). Кажется, это мгновенно уменьшило дрожание, которое я испытывал. FF по-прежнему определенно является самым слабым в плане гладкости (я даже не стал пытаться IE, потому что вы упоминали Safari и FF), но я больше не видел икать.