Плавное изменение изображений и привязка к ним иконок

[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();
});

[melky]

при наведении мыши останавливаем. при отведении через высчитанное время анимируем.

отсрочить анимацию в jQuery можно так :
http://api.jquery.com/delay/

[LCH]

Т.е. нужно как то остановить функцию ротатора при хувере на иконке...но вот как это сделать? И да...при хувере на какой то иконке изображение должно меняться на то, что ей соответствует...вот как еще эту связку сделать..что-то никак ума не приложу. Делал вот так -
$('#icon-1').hover(function(){
$('#icon-1')
.stop()
.animate({параметры}, 600);
rotate();
},
function(){
$('#icon-1')
.stop()
.animate({параметры}, 600)
});
но это произвольная замена при хувере, а нужно конкретное изображение

[melky]

Т.е. нужно как то остановить функцию ротатора при хувере на иконке...но вот как это сделать?

функция не даёт никаких шансов на остановку ротации - получается, никак.

И да...при хувере на какой то иконке изображение должно меняться на то, что ей соответствует...вот как еще эту связку сделать..что-то никак ума не приложу. Делал вот так -

можете сделать запускаемый пример на jsbin ?