Hello

I'm using jquery to create a nice animated hover effect on a set of links. When a mouse hovers over a link it fades out a main div (#content) and fades in another (depending which link is hovered on). On mouseout the 'new' div fades out and the original (#content) fades back in again. What I need is a way to make the #content fade in/out conditional. I suppose I need to add a clause that states something like "Fade the #content div in IF it's alpha is zero, else do nothing? Likeswise, fade the #content div out IF the alpha is 100%? Anybody got any ideas on how to achieve this?

Here's my current code:

Code:
/* Hides the link floating divs */
jQuery(document).ready(function() {
	jQuery('#sideNav #subText1').hide();
	jQuery('#sideNav #subText2').hide();
	jQuery('#sideNav #subText3').hide();
});

/* Fades in the hidden floating divs */
$(document).ready(function(){
  $("#sideNav li #trigger1").mouseover(function(){
    $("#sideNav #subText1").fadeIn(200);
  });
  $("#sideNav li #trigger2").mouseover(function(){
    $("#sideNav #subText2").fadeIn(200);
  });
  $("#sideNav li #trigger3").mouseover(function(){
    $("#sideNav #subText3").fadeIn(200);
  });
  /* Fades out the floating divs */
  $("#sideNav li a").mouseout(function(){
    $("#sideNav .pop-up").fadeOut(100);
  });
});

/* Fades out the main content div (or fades it in) */
jQuery(document).ready(function() {
	jQuery('.trigger').hover(function() {
		jQuery('#content').fadeOut(100);
		},
	function() {
		jQuery('#content').fadeIn(100);
		});
});
Any help greatly appreciated!