Problème avec la fontion animation de jquery

Bonjour, j'ai un souci un peu bizarre: Je veux réaliser un menu de navigation fixé en haut de la page avec une opacité à 0.3 en rgba et qui devient opaque (1) lorsque l'on scroll à 500px et invèrsement. J'ai donc pondu ce code mais le problème est qu'il y a un énorme temps de latence avant que l'animation ne s'enclenche et ce qui est encore plus bizarre, c'est que lorsque je modifie le temps de l'animation de 500ms à 1ms, tout va bien mais du coup, c'est moche ^^

Je vous met le code:
<nav id="MP">
<ul>
<li><a href="#">Section 1</a></li>
<li><a href="#">Section 2</a></li>
<li><a href="#">Section 3</a></li>
</ul>
</nav>

position: fixed;
width: 100%;
background-color: rgba(0,0,0,0.3);
}

display: inline-block;
margin-right: 50px;
}

text-decoration: none;
outline: none;
color: rgba(255,255,255,0.3);
font-size: 1.5em;
font-family: impact;
}

$(window).ready(function() {

$(window).scroll(function(){
    if ($(window).scrollTop() > 500) {
        $('#MP').animate({backgroundColor:'rgba(0,0,0,1)'},500);
    }
    else {
        $('#MP').animate({backgroundColor:'rgba(0,0,0,0.3)'},500);                            
    }
});

});

Merci d'éclairer ma lanterne :)