Question

I’m having a tricky time working through a jQuery issue. The page has a feature image. When the user hovers on the feature image, a transparent overlay with some supporting content fades in, and if they move their mouse outside the feature the supporting bar fades out. So far so good, but…

I’d like to have the transparent overlay fade in, hold a few seconds, then fade out when the page loads (like a sneak peak). Pretty easy, I thought. But, what I didn’t consider was that the function also needs to check to see if the mouse is already over the feature area when the page is loaded. If it is, the support bar shouldn’t fade out until the user isn’t hovering on the feature area (e.g., the initial auto fade out is skipped). So:

• Page loads
• If the mouse isn’t over the feature area, show the overlay, wait
  a few secs, fade it out
• If the mouse is over the feature area, show the overlay, don’t fade
  out until the user leaves the feature
  area
• After the initial run, anytime the user is over the feature the overlay
  fades in, when they mouseout the
  overlay fades out

I can’t seem to figure out a clean way to do this (I’d rather not have to track the mouse coords). Any ideas appreciated 🙂

Here’s the page: http://collective.poccuo.com/

And here’s what I have at the moment:

$(window).load(function(){  
    $('#content.homepage #support').show().delay(2000).fadeOut(100,function(){
        $('#content.homepage').hover(function(){
            $("#content.homepage #support").delay(500).fadeIn(350);
         },function(){
            $("#content.homepage #support").fadeOut(150);
        });
    });
 });

Answer 1

I think you should do it like this:

   var hideInitially = true; //This var does the magic
   $(window).load(function(){  
        $('#content.homepage').hover(function(){
            $("#content.homepage #support").delay(500).fadeIn(350);
            hideInitially= false; //If there has been a hover, don't hide on load
         },function(){
            $("#content.homepage #support").fadeOut(150);
        });
    $('#content.homepage #support').show();
    setTimeout(function(){ //Same as delay
       if(hideInitially) $('#content.homepage #support').fadeOut(100);  //Only hide if there wasn't a hover      
    }, 2000);
 });

What this code does is to prevent initial hiding if there has been a hover.
Hope this helps. Cheers