Javascript Fade Into New Image When Clicked

Right now I have a code to switch between two images when clicking text, but I'd like to create a function where I can click on the image itself and it fades into the next one, and be able to do this with more than two images. Also the images I want to use vary in width and height, but all have a max height and width of 600px. Here's my current code:

HTML:

<div id="cf2" class="shadow">
<img class="bottom" src="/images/Cirques.jpg" />
<img class="top" src="/images/Clown%20Fish.jpg" />
</div>
<p id="cf_onclick">Click me to toggle</p>

CSS:

#cf2 {
    position:relative;
    height:281px;
    width:450px;
    margin:0 auto;
}
#cf2 img {
    position:absolute;
    left:0;
    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    transition: opacity 1s ease-in-out;
}

#cf2 img.transparent {
    opacity:0;
}
#cf_onclick {
    cursor:pointer;
}

Java:

$(document).ready(function() {
    $("#cf_onclick").click(function() {
        $("#cf2 img.top").toggleClass("transparent");
    });
});