問題描述
JQuery 動畫凌亂 (JQuery Animations Messy)
So I'm trying to code this navigation and have got it all working except that sometimes the JQuery animation either breaks or is jumpy if you move your mouse too quickly. In Safari it looks pretty dreadful as well, it seems to almost flash the animations?
$(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);
});
});
Here's a JFiddle of it:
http://jsfiddle.net/d8g4w/
Also, live preview so you can see what it actually looks like:
http://dev.evaske.com/Navigation/
‑‑‑‑‑
參考解法
方法 1:
See what this does for you: jsFiddle
Right off the bat, I noticed that the markup wasn't 100% valid (anchor tags as immediate children of the ul node) and animating the 'float' property felt a bit weird to me (I'm not even sure jQuery supports animation of 'float'). I stripped out some of the cross‑browser CSS declarations (that didn't seem to have any bearing on the animation). You don't really need the anchor tags since you were handling the cursor with the CSS and the hover with a combination of CSS and JS. If you need to trigger from a mouseclick (which, if this is a navigation, I'm sure you will) I recommend using:
$('#navigation li').on('click', function(){...}
I tend to avoid using .hover() and instead rely more on
.on('mouseenter', function(){...}) and .on('mouseleave', function(){...})
as they more accurately represent the actual events I'm usually trying to target.
Probably the biggest improvement came from injecting the .stop() method before the .animate(). This seemed to instantly reduce the jittering that I was experiencing. FF is still definitely the weakest as far as smoothness is concerned (I didn't even bother trying IE because you mentioned Safari and FF) but I wasn't seeing the hiccuping any longer.
(by Tenatious、Brian Flanagan)