JS setTimeout & jQuery function

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?

Pointy · Accepted Answer · 2011-02-23 16:25:51Z

3

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.

answered Feb 23, 2011 at 16:25

Pointy

415k62 gold badges600 silver badges631 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

gnarf Over a year ago

The answer is here... However you may also want to look at ben alman's throttle/debounce jQuery plugin: benalman.com/projects/jquery-throttle-debounce-plugin

theorise Over a year ago

Oh I see. Thank you for the answer. Not being able select $(self) then becomes a problem because I have multiple elements on a single page using this function.

theorise Over a year ago

nevermind, I can set a variable outside of the setTimeout, thank you!

buley · Accepted Answer · 2011-02-23 16:27:06Z

0

I would perhaps simplify the problem this way: On mouseover I would instantiate a new Date(), getTime() on it and stash it into a var. Then on mouseleave you take another date, grabbing the timestamp again. In that same mouseleave, do an evaluation: if the difference between date 1 and date 2 is greater than 1/2 second, you fire your action. Else, you reset date 1.

answered Feb 23, 2011 at 16:27

buley

29.6k18 gold badges90 silver badges108 bronze badges

2 Comments

Anurag Over a year ago

I was thinking the same thing, but the OP may want the animation to proceed even if a user doesn't leave the element.

buley Over a year ago

Great minds think alike. :) The OP said "I just want the animation on mouseenter to only work after the mouse has been over it for at least half a second," which, if I'm reading that literally and correctly, seems to jibe with the above.

Surreal Dreams · Accepted Answer · 2011-02-23 16:28:02Z

0

you could try this instead of using setTimeout:

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

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

This will delay the mouseover animation by 500ms. If you mouse out, it calls stop(), which would kill the pending animation and then animate back to the starting position. If it never moved, the mouseout animation will also not happen (correctly - it has nowhere to go).

answered Feb 23, 2011 at 16:28

Surreal Dreams

26.4k4 gold badges49 silver badges61 bronze badges

2 Comments

theorise Over a year ago

Nice idea, this would have been ideal, the stop doesn't seem to work however.

Surreal Dreams Over a year ago

Huh, I wasn't expecting that. Does it work any differently if you don't chain the two event handlers?

Yunus Eren Güzel · Accepted Answer · 2011-02-23 16:35:31Z

0

Another way to do this

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

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

answered Feb 23, 2011 at 16:35

Yunus Eren Güzel

3,08811 gold badges38 silver badges63 bronze badges

Collectives™ on Stack Overflow

JS setTimeout & jQuery function

4 Answers 4

3 Comments

2 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

2 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related