"Class add" und dann "FadeIn"

[Shapeking]

Hallo, ich hänge seit Stunden an einem kleine jQuery Script fest. Leider komme ich nicht weiter was wohl auch dran liegt das ich mich erst seit wenigen Tagen mit jQuer befasse.

Verschiedene Referenzbilder (die in einer Liste (li) als Hintergrundbild festgelegt sind) sollen beim Mouseover ausgetauscht werden... von einer schwarz/weiss Version in eine Farbige mit kleinem Lupen Icon.

Die "Bilder" befinden sich ein einer Datei, jedoch wird erst der obere Ausschnitt angezeigt und beim Mouseover der Bildausschnit um -180px Y-Achse verschoben.

Bis dahin funktioniert auch alles super, jedoch will ich nicht das das Bild von jetzt auf gleich Farbig ist sondern die Farbige Version soll langsam durchscheinen (einfaden) und irgendwie hackt es bei diesem Punkt.


So weit bin ich:

jQuery:

$(document).ready(function(){

	$('li').hover(
		function() {
  $(this).addClass("stop").fadeIn("slow");
		},
		function() {
  $(this).removeClass("stop");  
		}
	)
 });

CSS:

.start {
	background-repeat: no-repeat;
}

.stop {
	background-position: 0px -180px;
}

HTML:

<ul>
 	<li class="start" style="background-image: url(images/offroad.jpg);">
	<a>
	<h2>Überschrift</h2>
	<p>Blabla Beschreibung</p>
	</a>
	</li>