因此,我正在尝试编写此导航代码并使其全部正常工作,只是有时如果您移动鼠标过快,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:
此外,实时预览,因此您可以看到它的实际外观: