Problem getting Function to loop

[dylanbaumannn]

Hello!

I'm working on a simple jQuery banner-ad for a client and the animations are as follows:

1. Image fadein
2. div fadein
3. div fadeout
4. Image fadeout

1. Image2 fadein
2. div2 fadein
3. div2 fadeout
4. Image2 fadeout

Then i need it to loop.


I currently have all the javascript and HTML/CSS to get the animations to display correctly.
However I can't seem to get the darned thing to LOOP correctly! Here is the code I'm currently using:

HTML

<div id="sliderContainer">

	<div id="surgCont">
    	<div class="part1">
            <div class="quote1"></div>
        </div>
    </div><!--/surgCont-->
    
    <div id="careCont">
    	<div class="part1">
            <div class="quote1"></div>
        </div>
    </div><!--/careCont-->

</div><!--/sliderContainer-->

jQuery

$(function(){
	function runIt(){
		//Surg
		//fadein
		$('div#surgCont').animate({opacity: 1}, 1000);
			//fadein
			$('div#surgCont>.part1>.quote1')
				.delay(1000)
			//fadeout
			$('div#surgCont>.part1>.quote1')
			        .delay(4500)
				.animate({opacity:0},1000);
                //fadeout
		$('div#surgCont').delay(13000).animate({opacity: 0}, 1000);
	
		//Care
		//fadein
		$('div#careCont').delay(14000).animate({opacity: 1}, 1000);
			//fadein
			$('div#careCont>.part1>.quote1')
				.delay(15000)
				.animate({opacity:1},1000);
			//fadeout
			$('div#careCont>.part1>.quote1')
				.delay(4500)
				.animate({opacity:0},1000);
               //fadeout
	       $('div#careCont').delay(13000).animate({opacity: 0}, 1000);	
         }//runit
	runIt();
});

Any help would be greatly appreciated!