Question

I have this function and I am wondering why the setTimeout is not working:

$(document).ready(function() {      
    $('.sliding .text').css("top","130px")     

    $('.sliding').mouseenter(function() {       
        mouseOverTimer = setTimeout(function() {
            $(this).find('.text').animate({"top": "0"}, 200);             
        }, 500);       
    })
    .mouseleave(function() { 
        $(this).find('.text').delay(500).animate({"top": "130px"}, 400); 
    });       
});     

I tried wrapping the mouseenter event in the timeout, but that didn’t seem like a great idea. I just want the animation on mouseenter to only work after the mouse has been over it for at least half a second.

Alternatively, is there a better way of doing it in jQuery?

Answer 1

The this value inside your timeout handler will not be what you think it’ll be. Add an explicit variable:

   $('.sliding').mouseenter(function() {   
        var self = this;    
        mouseOverTimer = setTimeout(function() {
            $(self).find('.text').animate({"top": "0"}, 200);             
        }, 500);       
    })

Also you should declare “mouseOverTimer” as a local variable outside the handler setup code (that is, as a local variable of the “ready” handler) and then cancel the timeout in the “mouseleave” handler:

    var mouseOverTimer = null;

   $('.sliding').mouseenter(function() {   
        var self = this;    
        mouseOverTimer = setTimeout(function() {
            $(self).find('.text').animate({"top": "0"}, 200);             
        }, 500);       
    })
   .mouseleave(function() { 
        $(this).find('.text').delay(500).animate({"top": "130px"}, 400); 
        cancelTimeout(mouseOverTimer);
    });       

As I look at this, I’m pretty sure that the “mouseleave” code isn’t really what you want; specifically I think the delay is probably unnecessary. I’m not 100% sure about what you want things to look like, however.