CODEWITHSUNDEEP
jqueryintervalsonmousemove
Gustav Hederström
Gustav Hederström

Reputation: 49

Hide div at mouse inactiv set to one div

I found a script and want to mod it a bit. Im trying to animate a div #menuwrap when the user is inactive or active over an certain div #gallery.

Now it still animates even outside the #gallery after its animated the first time.

Any help is much appreciated!

Demo: http://jsfiddle.net/m2FvY/1/

   $('#gallery').mouseover(function() {
        var interval = 1;
       setInterval(function(){            
           if(interval == 5){
               $('#menuwrap').animate({top: '-50px'}, 100); 
               interval = 1;
           }
           interval = interval+1;
            console.log(interval);
        },200); 

        $('#gallery').bind('mousemove keypress', function() {
            $('#menuwrap').animate({top: '0'}, 100); 
            interval = 1;
        }); 
});

Upvotes: 0

Views: 594

Answers (1)

Jarrett Barnett
Jarrett Barnett

Reputation: 803

JSFIDDLE DEMO

Delay timer resets anytime the user triggers the mousemove or keypress event on #gallery. You could also add the hover event in there to ensure the menu never hides when hovered over #gallery.

    var interval = 1;

    function delayCheck()
    {
       if(interval == 5)
       {
           $('#menuwrap').animate({top: '-50px'}, 100);
           interval = 1;
       }
       interval = interval+1; console.log(interval);
    }

    $('#gallery').bind('mousemove keypress', function() {
        $('#menuwrap').animate({top: '0'}, 100);
        interval = 1;

        // reset the delay timer
        clearInterval(_delay); console.log('reset timer');
        _delay = setInterval(delayCheck, 500);
    });


    // starts delay timer when page loads
    _delay = setInterval(delayCheck, 500);

ANSWER PART 2

JSFIDDLE DEMO #2

Only checks for inactivity once #gallery events mousemove or keypress have been triggered. Once the user has moved out of the #gallery box, it will kill the delayCheck() and set the #menuwrap back to top: -50px.

    var interval = 1;
    _delay = 0;

    function delayCheck()
    {
       if(interval == 5)
       {
           $('#menuwrap').animate({top: '-50px'}, 100);
           interval = 1;
           clearInterval(_delay);
       }
       interval = interval+1;
       console.log(interval);
    }

    // turn delayCheck() ON, when mousing to #gallery
    $('#gallery').bind('mousemove keypress', function()
    {
        console.log("mousemove keypress");

        $('#menuwrap').animate({top: '0'}, 100);
        interval = 1;

        // reset delayCheck
        clearInterval(_delay);
        _delay = setInterval(delayCheck, 500);
    });

    // turn delayCheck() OFF, when mousing out of #gallery
    $('#gallery').mouseout(function(){
        console.log("mouseout");
        $('#menuwrap').animate({top: '-50px'}, 100);
        interval = 1;

        clearInterval(_delay);
    });

Upvotes: 1

Related Questions