How to simplify these similar jQuery functions?

Question

i have pieced together some code that works for my project. however it is pretty long, but 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 guys 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);
    }
});

Answer 1

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.