Animation of tag line (system 2) - css class

by vincentieo

HTML

<script src="http://code.jquery.com/color/jquery.color.min.js"></script>
<div class="tagLine">
			
			<p>
				DUNTUTLABOREETDOLOREMAGNAALIQUA TENIMADMINIMVENIAMQUISNOSTR UDEXERCIT 
				<br>ATIONULLAMCOLABORISNISIUTALIQUIPEXEACOMMODOCONSEQUATUISAUTEI RUREDOLOR 
				<br>INRE<span class="first">TO</span>P<span class="first">GET</span>R<span class="first">THE</span>E<span class="first">REAL</span>H<span class="first">PICTURE</span>E<span class="first">YOU</span>N<span class="first">NEED</span>D<span class="first">THE</span>E<span class="first">RIGHT</span>R<span class="first">PRESENTATION</span>IT INVOLUPTAT 
				<br>EVELITE<span class="fourth">GETTING</span>S<span class="fourth">MEANING</span>S<span class="fourth">OUT</span>E<span class="fourth">OF</span>C<span class="fourth">DATA</span>R<span class="fourth">IS</span>L<span class="fourth">WHAT</span>L<span class="fourth">WE</span>U<span class="fourth">DO</span>MDOLOREEUFUGIAFPITNU
				<br>OREMIPSUMDOLORSITAMETCONSECTETURADIPISICINGELITSEDDOEIUSMODTE MPORINCID 
				<br>EURSIN<span class="second">AND</span>T<span class="second">THE</span>O<span class="second">MORE</span>C<span class="second">YOU</span>C<span class="second">LOOK</span>A<span class="second">THE</span>E<span class="second">MORE</span>C<span class="second">YOU</span>A<span class="second">SEE</span>TCUPIDATATNONPROIDENTUN 
				<br>INVOLUP<span class="fourth">CALL</span>T<span class="fourth">US</span>A<span class="fourth">TODAY</span>T<span class="fourth">AND</span>X<span class="fourth">FIND</span>E<span class="fourth">OUT</span>V<span span class="fourth">HOW</span>E<span class="fourth">WE</span>L<span class="fourth">CAN</span>P<span class="fourth">HELP</span>TYOUESSECIUMDOUMD
				<br>TUTLABOREETDOLOREMAGNAALIQUA TENIMADMINIMVENIAMQUISNOSTRUDE XERCITATIO 
				<br>NULLAMC<span class="third">ARE</span>O<span class="third">YOU</span>L<span class="third">GETTING</span>A<span class="third">THE</span>B<span class="third">FULL</span>O<span...

CSS

body{
	font-family: "Helvetica Neue","Helvetica",Helvetica,Arial,sans-serif;
}

.tagLine {
	width: 740px;
}

.tagLine p {
	color: #808080;
	max-width: 740px;

	font-weight: normal;
	transition: all 1s ease-in-out;
	display:none;
}

.highlight {
	
	text-shadow: 1px 1px 0.2px rgba(155, 165, 174, 0.5);
	color: #515d6b;

/*add vendor transitions */
	transition: all 2s ease-in-out;
}

.tagLine span.first{
	transition: all 2s ease-in-out;
}

.tagLine span.second{
	transition: all 2s ease-in-out;
}

.tagLine span.third{
	transition: all 2s ease-in-out;
}

.tagLine span.fourth{
	transition: all 2s ease-in-out;
}

JavaScript

$(document).ready(function() {

//color vars
var highlight = "#537499";
var background = "#d9d9d9";

// lighten the letters
function lighten(){
	$('.tagLine p, .tagline span').animate({
			"color": background,
		}, 800);
};
setTimeout(lighten,3000);

//remove highlightclass from all stages
function removeHighlight(){
	$('.first').removeClass('highlight');
	$('.second').removeClass('highlight');
	$('.third').removeClass('highlight');
	$('.fourth').removeClass('highlight');
};
removeHighlight();

//defin animation

	function tagAnimation(){
		$('.tagLine p').fadeIn('slow');	

		function first(){

			removeHighlight();
			$('.first').addClass('highlight');

		};

		function second(){
			
			removeHighlight();
			$('.second').addClass('highlight');
		};

		function third(){

			removeHighlight();
			$('.third').addClass('highlight');
		};

		function fourth(){

			removeHighlight();
			$('.fourth').addClass('highlight');

			setTimeout(tagAnimation, 6000);
		};


		setTimeout(first, 2000);
		setTimeout(second, 6000);
		setTimeout(third, 12000);
		setTimeout(fourth, 18000);

	};

//call animation
	setTimeout(tagAnimation,1200);


// end jquery block
});