Rotating Text

jQuery rotating text transition effect.

by the_voder

HTML

<div id="rotateycontainer">
    <p class="rotateytext">Text 1</p>
    <p class="rotateytext">Text 2</p>
    <p class="rotateytext">Text 3</p>
    <p class="rotateytext">Text 4</p>
</div>

CSS

.rotateycontainer {
    overflow: hidden;
    height: 50px;
}

.rotateytext {
    position: absolute;
	margin: 50px;
    opacity: 0;
}

JavaScript

$(document).ready(function() {
	
	var animintime	= 500;	// Animate in time (milliseconds)
	var showtime	= 2000;	// Show text for (milliseconds)
	var animouttime	= 200;	// Animate out time (milliseconds)
	
	// Total time for each element to animate in and out
	var animtotaltime = animintime + showtime + animouttime;
	
	// Animation function (animates all elements with queue)
    function rotator() {
		
		// Loop through sub-items
        $(".rotateytext").each(function(i) {
			
			// Delay by index * element animation time,
			// then add animations for current element to animation queue
            $(this).delay(i * animtotaltime)
				.animate({
                    top: '0px',
                    opacity: "1"
                }, {
                    queue: true,
                    duration: animintime
                })
                .delay(showtime)
                .animate({
                    top: '10px',
                    opacity: "0"
                }, {
                    queue: true,
                    duration: animouttime
                })
                .css("top", "-20px");
        });
		
		// Wait for all animations to complete on selected elements
        $(".rotateytext").promise().done(function() {
            // Run animation function again
			rotator();
        });
    };
	
	//Run animation function (loops itself when it finishes)
	rotator();

});