jQuery mouse hover animated effect

Question

I had to do on a WordPress website an mouse hover animated effect on the navigation menu elements. I've managed to finished the job using the following code:

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

The result could be seen here . Even though everything is working like I was expecting I am not satisfied with the code. The positioning values are manually set like you can see above. This could creates problem if a new element is added to the menu. Also I have some duplicate code which I want to get rid of. The menu items have common classes being a WordPress website like menu-item , menu-item-type-post_type , menu-item-object-page . Which is the best approach to optimize my code? Any guidance or help is more than welcomed. I am sorry for my not so best practices code but I am still on the process of learning some of the basics. :)

Answer 1

I guess you could use $(this) selector to access information like width( $(this).width() ) of the hovered element and its relative position to the parent $(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' );
});

This code may contain flaws, its just for inspiration:]

Answer 2

You could start with putting the code you repeat in a function and call that function with the needed parameters i guess. Look at the DRY principle if you want to learn how to write clean code. Also you could start using $ instead of jQuery. That looks a lot cleaner in my opinion.

You could get the HTML element one time and put it in an variable. I guess this would also save some rendering time.