<script src='jquery.js'></script>
<style>
#box1 {
	width:200px;
	height:25px;
	overflow:hidden;
	position:relative;
	border: 1px solid #000;
	float: left;
}
#box2 {
	margin-left: 20px;
	width:200px;
	height:25px;
	overflow:hidden;
	position:relative;
	border: 1px solid #000;
	float: left;
}
.cat {
	position:absolute;
	top:30px;
}
.headline {
    display: none;
}
.control {
	float: left;
}
.control span {
	cursor: pointer;
}
</style>

<script>
var currentCatId = 0;
var currentHeadlineId = 0;
var freeze = false;
var catCount = 0;

$('document').ready(function() {
	catCount = $('#cats span').size();
	
	$('#box1').hover(
		function() {
			freeze = true;
		}
		, function() {
			freeze = false;
			showHeadline();
		}
	);
	$('#box2').hover(
		function() {
			freeze = true;
		}
		, function() {
			freeze = false;
			showHeadline();
		}
	);	
	
	catDown();
});

function catDown() {
	currentHeadlineId = 0;
	var cat = $('<span class="cat">').html( $( '#cats span:eq(' + currentCatId + ')' ).html() );
	
	$('#box1 span').animate( {top: -20}, "slow", function() {
    	$(this).remove();
        $(cat).appendTo('#box1').animate( {top: 2}, "slow", function() {
        	showHeadline();
        });
    });
}

function showHeadline() {
	if( ! freeze ) {
		var headline = $('#headline_' + currentCatId + ' span:eq(' + currentHeadlineId + ')').html();
		if( headline ) {
			$('#box2 span').fadeOut( "slow", function() {
				$(this).remove();
				$('<span class="headline">').html( headline ).appendTo('#box2').fadeIn("slow", function() {
					currentHeadlineId++;
					showHeadline();
				});
				
			});
		} else {
			shiftCat();
			catDown();
		}
	}
}

function shiftCat() {
	currentCatId++;
	currentCatId = currentCatId % catCount;
}
</script>

<div class='control'>
	<span id='up'>up</span><br>
	<span id='down'>down</span>
</div>
<div id='box1'><span></span></div>
<div id='box2'><span></span></div>
<br clear='all'>

<div style='display:none'>
	<div id="cats">
		<span>News</span>
		<span>Pictures</span>
		<span>Blog</span>
	</div>
	
	<div id="headline_0">
		<span>News 1</span>
		<span>News 2</span>
		<span>News 3</span>
	</div>
	
	<div id="headline_1">
		<span>Pic 1</span>
		<span>Pic 2</span>
		<span>Pic 3</span>
	</div>
	
	<div id="headline_2">
		<span>Blog 1</span>
		<span>Blog 2</span>
	</div>
</div>