Search code examples
jqueryslideslideup

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');    
    }); 
});

Solution

  • 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');    
        }); 
    });