stop at hover

[3Pinter]

Hi all,

Well back on again ('last visite 05-27-2010') ...

Struggling with a piece of jquery code.

Hover on menu-item: fade in image > works fine.
Hover on menu-item, then quick next, and repeat this many times (aka. hovering like a maniac): fade in images happens in hovering order. Which results in a delayed proces and ends long after I stopped hovering.

My question: how can I stop that from happening?

if ($jquery('ul.show_pictures li').length ) {
		$jquery('ul.show_pictures li').filter(':not(:first)').hide().end().filter(':first').addClass('showing');
		$jquery('ul.show_menu li').filter(':first').addClass('showing_menuitem');
		rotate = function(){
			$jquery('ul.show_menu li').removeClass('showing_menuitem');
			$activeM.addClass('showing_menuitem');
			$jquery('ul.show_pictures li').removeClass('showing').fadeOut();
			$active.addClass('showing').fadeIn();
		};
		rotateSwitch = function(){
			play = setInterval(function() {
				$active = $jquery('ul.show_pictures li.showing').next();
				$activeM = $jquery('ul.show_menu li.showing_menuitem').next();			
				if ($active.length === 0) {
					$active = $jquery('ul.show_pictures li:first');
					$activeM = $jquery('ul.show_menu li:first');
				}
				rotate();
			}, 5000);	
		};
		rotateSwitch();      
		$jquery('ul.show_pictures li').hover(function() {
			clearInterval(play);
		}, function() {
			rotateSwitch();
		});
		$jquery('ul.show_menu li').hover(function() {
			$activeM = $jquery(this);
			$activeMnr = $jquery('ul.show_menu li').index(this);
			//alert($activeMnr);
			$active = $jquery('ul.show_pictures li').eq($activeMnr);
			clearInterval(play);
			rotate();
			rotateSwitch();		
		}, function() {
			rotateSwitch();
		});
	}