jquery .hover .animation verwenden, um zwischen einem Stapel von z-index angeordneten Bildern zu wechseln

Question

Teil A

Ich habe die folgenden:

<div class="graphic fadehover" class="last">                
<img src="graphic5test image" alt="" class="a" />
<img src="graphic5-2test image" alt="" class="b" />
</div>  

mit angehängtem css

.fadehover {display: block; height: 162px; margin: 70px 45px 0 0; position:relative;       width: 292px; z-index: 100; }
img.a {position: absolute; left: 0; top: 0; z-index: 10;}
img.b {position: absolute; left: 0; top: 0;}

und dieses Skript

$(document).ready(function(){
$("img.a").hover(
function() {
$(this).stop().animate({"opacity": "0"}, "slow");
},
function() {
$(this).stop().animate({"opacity": "1"}, "slow");
});

});

Ich möchte das Skript dann für Folgendes wiederverwenden:

<div class="animation" class="fadehover">

    <img src="/sun-low image" alt="sun rising" class=""/>
    <img src="/sun-hi image" alt="sun rising" class=""/>        
    <img src="/sun-hi image" alt="sun rising" class=""/>        
</div>

mit angehängtem css:

.animation {position: absolute; left: 675px; top: 10px; z-index: 25; } /*positions     sunrise and hills */

.hills{position: absolute; left: 340px; z-index: 50; }

img.e {position: absolute; left: 0; top: 0; z-index: 10;}
img.f {position: absolute; left: 0; top: 0; z-index:2; }

Ich weiß, die Bild-Links oben sind falsch, aber weil ich ein Neuling bin Stackoverflow lässt mich nicht mit ihnen intakt zu posten.

Ich möchte das Skript oder eine Variation davon wiederverwenden, um zwischen den drei z-index angeordneten Bildern (einer aufgehenden Sonne) überblenden zu können, weiß aber nicht, wie man eine doppelte Version des Skripts auf die neuen img-Klassen ausrichten kann.

Kann mir jemand den richtigen Weg dazu zeigen?

Danke.