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 -->

结果可见here。尽管一切都像我预期的那样工作，但我对代码并不满意。如上所示，定位值是手动设置的。如果将新元素添加到菜单中，这可能会产生问题。我也有一些我想摆脱的重复代码。菜单项具有常见的类，例如 menu-item、menu-item-type-post_type、menu-item-object-page 等 WordPress 网站。优化我的代码的最佳方法是什么？任何指导或帮助都非常受欢迎。我很抱歉我的最佳实践代码不是那么好，但我仍在学习一些基础知识。 :)

Answer 1

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

$('.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

您可以先将重复的代码放入一个函数中，然后使用我猜想的所需参数调用该函数。如果您想学习如何编写干净的代码，请查看 DRY 原则。你也可以开始使用 $ 而不是 jQuery。在我看来，这看起来更干净。

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