CODEWITHSUNDEEP
jqueryhovermouseover
philzelnar
philzelnar

Reputation: 123

jQuery: If Mouse Hovering When Page Loads…

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:

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

Upvotes: 1

Views: 3211

Answers (3)

ebynum
ebynum

Reputation: 3534

The issue is that .mouseenter() doesn't get called if you're already on top of the item. However, .mousemove() does. This doesn't let you "detect" them without moving their mouse, but if they haven't moved their mouse, it's probably safe to go ahead and hide the overlay, re-showing it whenever they do move.

If you REALLY want to detect that they start with their mouse on top of your item without them moving their mouse, you should be able to grab the cursor position and test it against the screen position of your item.

$('#yourdiv').hover(function() {
    // Show the thing
    // This is the "normal" show it scenario
}, function() {
    // Hide the thing
    // We always want to hide it when they leave
}).mousemove(function() {
    // Show the thing; if this is bound and they move on #yourdiv, you want to show it

    // However, this is only meaningful the first time, so stop tracking mousemove
    $(this).unbind('mousemove');
});

Upvotes: 0

Edgar Villegas Alvarado
Edgar Villegas Alvarado

Reputation: 18354

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

Upvotes: 0

Niklas
Niklas

Reputation: 30012

Set a timeout which hides the div, but clear the timeout when the user hovers the item, so it won't fade out automatically anymore. 

var timeout = window.setTimeout(function(){
    $("#content.homepage #support").trigger('mouseout')
},4000);

$('#content.homepage #support').show();


        $('#content.homepage').hover(function(){
            window.clearTimeout(timeout);
            $("#content.homepage #support").fadeIn(350);
         },function(){
            $("#content.homepage #support").fadeOut(150);
        });

example: http://jsfiddle.net/niklasvh/4sejb/

Upvotes: 1

Related Questions