FadeIn / FadeOut

FadeIn / FadeOut

Hi ... I have set up a jquery script that fades in an image and three lines of text.

There are two things I want to achieve here and am not succeeding.

1. Stop the loop.  I'd like the image and three lines of text to fade in, then out and then stop.
2. After the cycle is complete I would like to redirect to another URL.

Here's my code so far:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style>
.quotes {display: none;}​
</style>
</head>

<body>
<h2 class="quotes">
<img border="0" src="../Pictures/ncc.bmp" width="127" height="110"></h2>
<h2 class="quotes">Norwood Cycling Club has moved to a new site address ... </h2>
<br>
<h2 class="quotes">You will be redirected automatically ... </h2>​
<br>
<h2 class="quotes">The new address is <a href="norwoodcc.com.au">norwoodcc.com.au</a> ... </h2>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
(function() {

    var quotes = $(".quotes");
    var quoteIndex = -1;

    function showNextQuote() {
        ++quoteIndex;
        quotes.eq(quoteIndex % quotes.length)
            .fadeIn(2000)
            .delay(2000)
            .fadeOut(2000, showNextQuote);
    }

    showNextQuote();

})();
</script>
</body>
</html>
</body>

</html>