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。即使一切都像我期待的那样工作，我对代码不满意。手动设置定位值，如上所示。如果将新元素添加到菜单中，这可能会产生问题。我还有一些重复的代码，我想摆脱它。菜单项的公共类是WordPress网站，如menu-item，menu-item-type-post_type，menu-item-object-page。哪种方法可以优化我的代码？任何指导或帮助都受到欢迎。我很抱歉我没有那么好的实践代码，但我仍然在学习一些基础知识。：）

Answer 1

我猜您可以使用$（this）选择器来访问hovered元素的宽度（$(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元素一次并将其放入变量中。我想这也可以节省一些渲染时间。

jQuery鼠标悬停动画效果

2 个答案: