jQuery鼠标悬停动画效果

Question

我不得不在一个WordPress网站上做鼠标悬停动画效果的导航菜单元素。我已经使用以下代码完成了这项工作：

<!-- Marius was here :) -->
<style type="text/css">
.fancy-img {
    height: 51px;
    background-image: url(http://www.minortest2.dk/wp-content/themes/bizway-childtheme/images/knap.png);
    background-repeat: no-repeat;
}
.fancy-container {
    padding-top: 10px;
}
.fancy {
    position: absolute !important;
    top: 0px;
    z-index: -1;
    overflow: hidden;
}
.container_24 .grid_sub_19 {
    width: 83% !important;
}
</style>
<script type="text/javascript">
jQuery('#menu-topmenu').append('<li class="fancy"><div class="fancy-container"><div class="fancy-img"></div></div></li>');
jQuery('.menu-item-11').hover(function() {
    jQuery('.fancy').stop();
    jQuery('.fancy').css('width','107px');
    jQuery('.fancy-img').css('background-size','107px 33px');
    jQuery('.fancy').animate({ "left": "0px" }, 'fast' );
    jQuery(this).children().css('color','#1c82e0');
    jQuery(this).siblings().children().css('color','#fff');
})
jQuery('.menu-item-20').hover(function() {
    jQuery('.fancy').stop();
    jQuery('.fancy').css('width','141px');
    jQuery('.fancy-img').css('background-size','141px 33px');
    jQuery('.fancy').animate({ "left": "107px" }, 'fast' );
    jQuery(this).children().css('color','#1c82e0');
    jQuery(this).siblings().children().css('color','#fff');
})
jQuery('.menu-item-36').hover(function() {
    jQuery('.fancy').stop();
    jQuery('.fancy').css('width','155px');
    jQuery('.fancy-img').css('background-size','155px 33px');
    jQuery('.fancy').animate({ "left": "248px" }, 'fast' );
    jQuery(this).children().css('color','#1c82e0');
    jQuery(this).siblings().children().css('color','#fff');
})
jQuery('.menu-item-37').hover(function() {
    jQuery('.fancy').stop();
    jQuery('.fancy').css('width','107px');
    jQuery('.fancy-img').css('background-size','107px 33px');
    jQuery('.fancy').animate({ "left": "403px" }, 'fast' );
    jQuery(this).children().css('color','#1c82e0');
    jQuery(this).siblings().children().css('color','#fff');
})
jQuery('.menu-item-38').hover(function() {
    jQuery('.fancy').stop();
    jQuery('.fancy').css('width','111px');
    jQuery('.fancy-img').css('background-size','111px 33px');
    jQuery('.fancy').animate({ "left": "514px" }, 'fast' );
    jQuery(this).children().css('color','#1c82e0');
    jQuery(this).siblings().children().css('color','#fff');
})
</script>
<!-- Until here :D -->

结果可以看到这里。尽管一切都像我所期望的那样正常工作，但我对代码并不满意。如上文所示，定位值是手动设置的。如果将一个新元素添加到菜单中，这可能会造成问题。此外，我有一些重复的代码，我想摆脱。菜单项的常见类是WordPress网站，如menu-item、menu-item-type-post_type、menu-item-object-page。优化我的代码的最佳方法是哪种？任何指导或帮助都是非常欢迎的。很抱歉，我的最佳实践代码，但我仍在学习的过程中的一些基础。:)

Answer 1

我想您可以使用$(this)选择器来访问悬停元素的宽度($(this).width())及其与父元素的相对位置等信息。

$('.menu-item').hover(function(){
$('.fancy').stop();
$('.fancy').css('width',$(this).width()+'px');
$('.fancy-img').css('background-size',$(this).width()+'px 33px');
$('.fancy').animate({ "left": $(this).position().left }, 'fast' );
});

这段代码可能包含缺陷，只是为了启发：]

Answer 2

您可以首先将重复的代码放入函数中，然后使用我猜的所需参数调用该函数。如果您想学习如何编写干净的代码，请看枯燥的原则。此外，您还可以开始使用$而不是jQuery。在我看来这看起来要干净得多。

您可以一次获得HTML元素并将其放入变量中。我想这也会节省一些渲染时间。