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);
    }
});
I assume you have set up the links in the menu properly, i.e. they reference the elements they correspond to, something like

&lt;ul id="menu"&gt;
    &lt;li&gt;&lt;a href="#home"&gt;Home&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#referenzen"&gt;Referenzen&lt;/a&gt;&lt;/li&gt;
    &lt;!-- ... --&gt;
&lt;/ul&gt;


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.