Fading Text and Image in jquery slideshow at the same time

I am trying to have text that is placed over an image cross fade into another image with text placed over it. I am using jquery and the images are cross fading perfectly. The text isn’t working so well and in Firefox it seems to be very choppy and even sometimes the text just disappears and then there is a blank slide without any text or the text is showing up on the wrong image. Here is the code I have so far:

<div id="slides">
            	<div class="slide">
                	<img src="_images/placeholder3.jpg" width="695" height="195" alt="A Passion for Service" />
                    <div class="slideText">
                    	<h1>And A Different Heading</h1>
                        <p>With the appropriate solution for each client, we provide biomedical engineering and information technology services to suit your needs.</p>
                    </div><!-- end of slideText -->
                </div>
            	<div class="slide">
                	<img src="_images/placeholder4.jpg" width="695" height="195" alt="A Passion for Service" />
                    <div class="slideText">
                    	<h1>Some Other Heading</h1>
                        <p>From patient monitoring to defibrillators, from anesthesia machines to PACS gateways, from view stations to archives, we have the answers to all your biomedical and informatics service needs.</p>
                    </div><!-- end of slideText -->
                </div>
                <div class="slide">
                	<img src="_images/placeholder2.jpg" width="695" height="195" alt="Passion for Service" />
                    <div class="slideText">
                    	<h1>Another Heading</h1>
                        <p>Our proficiency in informatics ensures the effective and efficient use of medical data and information with computers and communications networks providing a natural technical base for the field.</p>
                    </div><!-- end of slideText -->
                </div>
                <div class="slide">
                	<img src="_images/placeholder.jpg" width="695" height="195" alt="A Passion for Service" />
                    <div class="slideText">
                    	<h1>A Passion for Service</h1>
                        <p>Our unique combination of biomed experience and informatics expertise provides our clients with a philosophy that embraces the full spectrum of service, technology and data needs of a patient care environment.</p>
                    </div><!-- end of slideText -->
                </div>
            </div><!-- end of slides -->

Here is my CSS:

#slides {
	width:695px;
	height:195px;
	float:left;
	margin:25px 0px 15px 20px;
	overflow:hidden;
}

#slides .slide img {
	position:absolute;
}

.slideText {
	position:absolute;
	width:350px;
	margin:25px 0px 0px 30px;
	z-index:600;
}

.slideText h1 {
	font-size:1.8em;
	font-style:italic;
	padding:0px 0px 10px 0px;
	font-weight:bold;
	color:#ffffff;
}

.slideText p {
	font-size:1.5em;
	padding:0px;
	font-weight:normal;
	line-height:1.4em;
	color:#ffffff;
}

Here is my javascript:

<script>
	$(document).ready(function() {
		rotatePics(1);
		rotateText(1);
	});
	
	function rotatePics(currentPhoto) {
		var numberOfPhotos = $('#slides .slide img').length;
		currentPhoto = currentPhoto % numberOfPhotos;
		
		$('#slides .slide img').eq(currentPhoto).fadeOut(function() {
			//re-order the z-index
			$('#slides .slide img').each(function(i) {
				$(this).css(
					'zIndex',((numberOfPhotos - i) + currentPhoto) % numberOfPhotos
				);
			});
			
			$(this).show();
			setTimeout(function() {rotatePics(++currentPhoto);}, 4000);
		});
	}
	
	function rotateText(currentText) {
		var numberOfTexts = $('#slides .slide .slideText').length;
		currentText = currentText % numberOfTexts;
		
		$('#slides .slide .slideText').eq(currentText).fadeOut(function() {
			//re-order the z-index
			$('#slides .slide .slideText').each(function(i) {
				$(this).css(
					'zIndex',((numberOfTexts - i) + currentText) % numberOfTexts
				);
			});
			
			$(this).show();
			setTimeout(function() {rotateText(++currentText);}, 4000);
		});
	}
</script>

I am new to jquery and am going through the Sitepoint book "JQuery: Novice to Ninja. I am using the crossfade code from the book and I tried to apply it to the text as well. Any help to get this to work properly would be greatly appreciated.

Thanks!

When fading text, pay careful attention to how IE fades it when ClearType is enabled (as it is on most machines now). IE completely stuffs up the aliasing of the text.

I have put in to production a good solution using the jQuery Cycle plugin.

You might think that it’s only for images, but it works very well for all other forms of content too, including images. And the plugin has special code to help fix the ClearType problem that you see in IE web browsers too.

Here’s the script that uses jQuery Cycle for good stable cross-fading text.


$(function () {
    var $container = $('#quotes'),
        quotes = [
            {quote: 'quote 1', source: 'person 1'},
            // more quotes here
            {quote: 'quote 20', source: 'person 20'}
    ];
    $(quotes).each(function (i) {
        var quote = this.quote + ' <span>- ' + this.source + '</span>';
        $container.append('<div><p>' + quote + '</p></div>');
    });
    $container.cycle({
        speed: '2000',
        timeout: '10000',
        cleartype: '1' // enable cleartype corrections 
    });
});

I finally had some time to work on this again. Your solution works beautifully! Thanks for the help!