JQuery動畫凌亂

所以我試圖編碼這個導航，並得到它的所有工作，除了有時JQuery動畫或者打破或者如果你太快地移動你的鼠標是跳動。在Safari中它看起來也非常可怕，它似乎幾乎閃動了動畫？JQuery動畫凌亂

$(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/

來源

2013-03-05 Tenatious

看看這樣做對你：jsFiddle

馬上我注意到這個標記並不是100％有效的（定位標記爲ul節點的直接子節點），並且爲'float'屬性設置動畫讓我覺得有點奇怪（我甚至不確定jQuery支持'浮動'動畫）。我刪除了一些跨瀏覽器的CSS聲明（這對於動畫似乎沒有任何影響）。你並不需要定位標記，因爲你正在使用CSS處理光標，並且使用CSS和JS組合來懸停。如果你需要從一個鼠標點擊（其中，如果這是一個導航，我敢肯定你會）觸發我建議使用：

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

我傾向於）避免使用.hover（，而是更多地依賴在

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

，因爲它們更準確地反映實際的事件，我平時努力的目標。

可能最大的改進來自方法在.animate()之前注入。這似乎立即減少了我所經歷的抖動。就平滑而言，FF仍然是最弱的（我甚至沒有考慮過嘗試IE，因爲你提到了Safari和FF），但我沒有再看到這種打嗝。

來源

2013-03-06 03:25:02

如果有人將鼠標懸停在其上，然後在文本閃爍進入和退出的過程中很快地將鼠標懸停在它上面，有沒有辦法阻止它？ – Tenatious 2013-03-06 11:00:02

也許吧。 :)這是你期望用戶參與的那種交互行爲嗎？ – 2013-03-06 13:26:06

JQuery動畫凌亂

回答

相關問題