Using stop() to stop the jquery lag

Question

I know I am supposed to use $(selector).stop().animate(); somewhere but I am not sure how I can stop the lag when you go off and on it really fast it will keep animating. Here is my code, if you could tell me what to put I would be set (keep in mind I am a beginner with jquery).

$(document).ready(function(){

var order = $('#order').mouseenter(function(){
 $('#animateorder').animate({top: '+=5.5em'}, 'fast')
});

var order2 = $('#order').mouseleave(function(){

 $('#animateorder').animate({top: '-=5.5em'}, 'fast')
});

});
$(document).ready(function(){
 $('#contact').mouseenter(function(){
  $('#animatecontact').animate({top: '+=5.5em'}, 'fast')
 });
$('#contact').mouseleave(function(){
  $('#animatecontact').animate({top: '-=5.5em'}, 'fast')
 });
});

And what you don't understand in `$(selector).stop().animate();` regarding your code??? — A. Wolff, Aug 05 '13 at 19:24
Please don't use the "fix" tag unless you're talking about FIX financial protocol. — Grant Birchmeier, Aug 05 '13 at 20:15

score 0 · Answer 1 · answered Aug 05 '13 at 19:23

One solution is to use a timer to delay the mouseenter action slightly so nothing happens if the user is moving the mouse in and out quickly. Something like this, although I probably haven't covered all the details. But this should give you some idea of how to proceed.

var timer = null;
$('#contact).mouseenter(function() {
    timer = setTimeout(function() {
        $('#animatecontact').animate({top: '+=5.5em'}, 'fast');
        timer = null;
    }, 250);  // Adjust to fit your needs best
});

$('#contact').mouseleave(function() {
    if(timer !== null) {
        clearTimeout(timer);
        timer = null;
    }

    $('#animatecontact').animate({top: '-=5.5em'}, 'fast');
});

Like I said, I didn't intend to cover all the details. Try some debugging--the Chrome debugger is excellent. You can use console.log() at key points in these functions to find out what's going wrong. — SaganRitual, Aug 06 '13 at 04:13

Using stop() to stop the jquery lag

1 Answers1