[LCH]

Здравствуйте уважаемые форумчане. Возникла такая задача - есть несколько иконок, и есть несколько фоновых изображений. Нужно привязать к каждой иконке соответствующее ей изображение. В обычном порядке когда загрузилась страница первая иконка увеличивается плавно, на фоне соответствующее ей изображение, через несколько секунд она уменьшается, увеличивается следующая иконка и фоновое изображение меняется на другое, что соответствует второй иконке...и так по кругу, а когда пользователь наводит курсор на какую то иконку - все это дело становится на паузу, пока курсор с иконки не будет убран. Увеличение иконок сделал через jQuery animate, обычную ротацию изображений - через смену прозрачности, а вот как это все связать воедино - не могу додуматься. Буду благодарен за любую помощь
Функция увеличения иконок:

$('#icon-1').hover(function(){
		$('#icon-1')
			.stop()
				.animate({параметры}, 600);
		},
		function(){
			$('#icon-1')
				.stop()
					.animate({параметры}, 600)
		});

функция анимации

function theRotator() {

	$('div.images ul li').css({opacity: 0.0});

	$('div.images ul li:first').css({opacity: 1.0});

	setInterval('rotate()',5000);
}
 
function rotate() {	

	var current = ($('div.images ul li.show')?  $('div.images ul li.show') : $('div.images ul li:first'));
 
	var next = ((current.next().length) ? ((current.next().hasClass('show')) ? $('div.images ul li:first') :current.next()) : $('div.images ul li:first'));	

 
	next
		.css({opacity: 0.0})
			.addClass('show')
				.animate({opacity: 1.0}, 0);
	current
		.animate({opacity: 0.0}, 0)
			.removeClass('show');
};
 
$(document).ready(function() {		
	theRotator();
});