# Animation effects for menu items

I have pieced together some code that works for my project. However, it is pretty long, but self-similar. I am a jQuery beginner and I tried to shorten the code by using variables, but it didn't work so far. I guess I should use some for()-statement. Could you help me to simplify this code?

//apply the class "active" to the menu items whose div is in the viewport and animate
$('#home').bind('inview', function (event, visible) { if (visible == true) {$('#menu li:nth-child(1)').stop().animate(
{backgroundPosition:"(0 0)"},
{duration:500});
$('#menu li:nth-child(1) a').css( {'color': 'white'} );$('#nav li:nth-child(1)').stop().animate({opacity: 1}, 500);
} else {
$('#menu li:nth-child(1)').stop().animate( {backgroundPosition:"(-200px 0)"}, {duration:500});$('#menu li:nth-child(1) a').css( {'color': 'black'} );
$('#nav li:nth-child(1)').stop().animate({opacity: 0.2}, 500); } });$('#referenzen').bind('inview', function (event, visible) {
if (visible == true) {
$('#menu li:nth-child(2)').stop().animate( {backgroundPosition:"(0 0)"}, {duration:500});$('#menu li:nth-child(2) a').css( {'color': 'white'} );
$('#nav li:nth-child(2)').stop().animate({opacity: 1}, 500); } else {$('#menu li:nth-child(2)').stop().animate(
{backgroundPosition:"(-200px 0)"},
{duration:500});
$('#menu li:nth-child(2) a').css( {'color': 'black'} );$('#nav li:nth-child(2)').stop().animate({opacity: 0.2}, 500);
}
});
$('#unternehmen').bind('inview', function (event, visible) { if (visible == true) {$('#menu li:nth-child(3)').stop().animate(
{backgroundPosition:"(0 0)"},
{duration:500});
$('#menu li:nth-child(3) a').css( {'color': 'white'} );$('#nav li:nth-child(3)').stop().animate({opacity: 1}, 500);
} else {
$('#menu li:nth-child(3)').stop().animate( {backgroundPosition:"(-200px 0)"}, {duration:500});$('#menu li:nth-child(3) a').css( {'color': 'black'} );
$('#nav li:nth-child(3)').stop().animate({opacity: 0.2}, 500); } });$('#taetigkeit').bind('inview', function (event, visible) {
if (visible == true) {
$('#menu li:nth-child(4)').stop().animate( {backgroundPosition:"(0 0)"}, {duration:500});$('#menu li:nth-child(4) a').css( {'color': 'white'} );
$('#nav li:nth-child(4)').stop().animate({opacity: 1}, 500); } else {$('#menu li:nth-child(4)').stop().animate(
{backgroundPosition:"(-200px 0)"},
{duration:500});
$('#menu li:nth-child(4) a').css( {'color': 'black'} );$('#nav li:nth-child(4)').stop().animate({opacity: 0.2}, 500);
}
});
$('#kontakt').bind('inview', function (event, visible) { if (visible == true) {$('#menu li:nth-child(5)').stop().animate(
{backgroundPosition:"(0 0)"},
{duration:500});
$('#menu li:nth-child(5) a').css( {'color': 'white'} );$('#nav li:nth-child(5)').stop().animate({opacity: 1}, 500);
} else {
$('#menu li:nth-child(5)').stop().animate( {backgroundPosition:"(-200px 0)"}, {duration:500});$('#menu li:nth-child(5) a').css( {'color': 'black'} );
$('#nav li:nth-child(5)').stop().animate({opacity: 0.2}, 500); } });$('#anfahrt').bind('inview', function (event, visible) {
if (visible == true) {
$('#menu li:nth-child(6)').stop().animate( {backgroundPosition:"(0 0)"}, {duration:500});$('#menu li:nth-child(6) a').css( {'color': 'white'} );
$('#nav li:nth-child(6)').stop().animate({opacity: 1}, 500); } else {$('#menu li:nth-child(6)').stop().animate(
{backgroundPosition:"(-200px 0)"},
{duration:500});
$('#menu li:nth-child(6) a').css( {'color': 'black'} );$('#nav li:nth-child(6)').stop().animate({opacity: 0.2}, 500);
}
});

• we can guess at the purpose of the function however it would be good if you could specifically state the requirememnts for your function. Also it would be good to see what you have attempted so we can help you improve. We wont just do work for you. – Jon Taylor Aug 4 '12 at 12:25
• Please also show the HTML markup. Are those ids (#anfahrt, etc) the same nodes referenced by the nth-child()? – Michael Aug 4 '12 at 12:27

I assume you have set up the links in the menu properly, i.e. they reference the elements they correspond to, something like

<ul id="menu">
<li><a href="#home">Home</a></li>
<li><a href="#referenzen">Referenzen</a></li>
<!-- ... -->
</ul>


So you can just search for the corresponding link with the attribute selector [docs] and get the enclosing li element:

$('#home, #referenzen, ...').bind('inview', function (event, visible) { var$menu_element = $('#menu a[href=#' + this.id + ']').closest('li'), // get the '#nav li' element at the same position$nav_element =  $('#nav li').eq($menu_element.index());

$menu_element.stop().animate( {backgroundPosition: visible ? '(0 0)' : '(-200px 0)'}, {duration: 500} ).find('a').css({color: visible ? 'white' : 'black'});$nav_element.stop().animate({opacity: visible ? 1 : 0.2}, 500);
});


If you don't have set up the links correctly (you really should), give the li items in the #menu (and maybe #nav) list a (for example) data-id attribute with a value corresponding to the element's ID and again, use the attribute selector to get them.