Problems with fadein/out function

JavaScript
1

Please help.
Im trying to make a function that fades out a span background and fades another in. but it dosnt seem to work a 100%. When i do a mouseover on one of the links all the span containers fades in?


$('#leftcol-front a').append('<span></span>');

$('#leftcol-front a').hover(function() {
	var $fade = $(this);

	$fade.addClass('onmouseover');
	  $('#leftcol-front a.onmouseover span').stop().fadeTo(700, 0), fadeIn()
	
	function fadeIn() {
	  $fade.removeClass('onmouseover');
	  $fade.addClass('fadein');
	  $('#leftcol-front a.fadein span').css({ 'opacity': 0 });	
	  $('#leftcol-front a.fadein span').stop().fadeTo(700, 1);
	}
},
	function () {
	  $('#leftcol-front a.fadein span').stop().fadeTo(700, 0), onMouseOut()
      $fade.removeClass('fadein');

	function onMouseOut() {
	  $('#leftcol-front a span').css({ 'opacity': 1 });	
	}
	
}
);