Trocar imagem após rolagem

Fala ae galera, tudo bem??

Estou montando um site usando Parallax Scroll (aquela técnica de velocidade de scroll diferente para os elementos da página) e decidi deixar o menu fixo no topo. Até ai td bem, porém eu quero fazer com que a imagem que fica no topo, junto ao menu, seja substituída por outra após rolar a tela.

Depois de muito pesquisar na internet cheguei uma solução usando Jquery para substituição de uma classe css.

<script>
jQuery("document").ready(function($){

 var nav = $('.imgright');

 $(window).scroll(function () {
 if ($(this).scrollTop() > 700) {
 nav.addClass("imgrightchange");
 } else {
 nav.removeClass("imgrightchange");
 }
 });

});
</script>

Em cima disso criei duas classes com as imagens que eu queria trocar como background...

.imgright{
	background: url(itau_small.jpg) no-repeat;
	position:absolute;
	top:0px;
	right:0px;
	margin:0px auto 0px auto;
	width:123px;
	height:123px;
}
.imgrightchange{
	background: url(testes_small.jpg) no-repeat;
	position:absolute;
	top:0px;
	right:0px;
	margin:0px auto 0px auto;
	width:123px;
	height:123px;
}

Com isso, consegui chegar no que eu queria, porém ficou feia a troca das imagens.

O ponto agora é:

• Existe uma forma melhor pra fazer isso que eu quero?
• Como eu faço pra deixar essa transição das imagens mais suave? Com efeito de fade in/out talvez?

Desde já.. valeu pela ajuda !!!