CODEWITHSUNDEEP
jqueryslideslideup
OneLoop
OneLoop

Reputation: 25

Prevent Loop jQuery

I created this script for scrolling up with jQuery, but when you mouseover and mouseout multiple times, the script goes into the loop until it finishes for every time you mouse over it.

I already tried to search for a solution but I didn't sorted it out, here's the code:

$(document).ready(function(){

    $('.desc').hide();  

    $('.work').mouseover(function(){
        $('.desc', this).slideDown('900');  
    });

    $('.work').mouseleave(function(){
        $('.desc', this).slideUp('900');    
    }); 
});

Upvotes: 2

Views: 1328

Answers (4)

Ilia G
Ilia G

Reputation: 10221

The .stop() will help on paper, but animation will still look jerky. What you really looking for is delayed hover event to trigger animation when user actually "hovering" over your .work element. There are a few jQuery plugins for that. Try out hoverIntent - sample. Or you could write your own, which isn't terribly hard either.

Also FYI 900 is almost a full second - that is way longer than a polite animation should be.

Upvotes: 0

Rafay
Rafay

Reputation: 31043

try using .stop(), notice passing true as both the args, its clears the queue(read the docs for more information) and jumps to the end. if you dont pass true as the args the animations will be queued and executed so you will face the same behavior as you are facing at the moment

$(document).ready(function(){

    $('.desc').hide();  

    $('.work').mouseover(function(){
        $('.desc', this).stop(true,true).slideDown('900');  
    });

    $('.work').mouseleave(function(){
        $('.desc', this).slideUp('900');    
    }); 
});

Upvotes: 4

Virendra
Virendra

Reputation: 2553

Add stop() before each animation, which clears the animation queue. http://api.jquery.com/stop/

$(document).ready(function(){

    $('.desc').hide();  

    $('.work').mouseover(function(){
        $('.desc', this).stop().slideDown('900');  
    });

    $('.work').mouseleave(function(){
        $('.desc', this).stop().slideUp('900');    
    }); 
});

Upvotes: 0

Anonymous
Anonymous

Reputation: 3689

You need to add stop() before each animation (slideUp and slideDown). This little function stops the animation before adding a new one to the animation queue!

Upvotes: 0

Related Questions