CODEWITHSUNDEEP
javascriptjquerydelayslidedownslideup
yorkshiredev
yorkshiredev

Reputation: 33

jQuery - slideDown on mouseenter > delay > SlideUp on mouseleave

I have created a very simple jQuery sliding function that works, but requires improvements. The basic timeline of the function needs to:

  1. SlideDown on mouseenter
  2. Stay visible until mouseleave
  3. When mouseleaves, delay the SlideUp by 2 seconds

^^This works, but if you slide up and down several times, the function stops working for a few seconds. Can anyone please suggest a solution? JS FIDDLE attached

JSFIDDLE: http://jsfiddle.net/lord_dev/b1g50eqk/4/

$(document).ready(function(){
    $hover = true;
    $( "#slide" ).mouseenter(function() {
        if($hover) {
            $( ".slide--hidden" ).slideDown('fast');
        }
    });
    $( "#slide" ).mouseleave(function() {
        $hover = false;
        $( ".slide--hidden" ).delay(2000).slideUp('fast').queue(function(){
            enableHover();
            $(this).dequeue(); 
        });
    });
    function enableHover() {
        $hover = true;
    }
});

Upvotes: 1

Views: 1041

Answers (1)

Waltur Buerk
Waltur Buerk

Reputation: 1368

Replace your javascript with this. It works great if i understood your problem correctly.

$(document).ready(function(){
    var thetimeout;
    $('#slide').mouseover(function() {
        clearTimeout(thetimeout);
        $('.slide--hidden').slideDown();
    });
    $('#slide').mouseleave(function() {
        thetimeout = setTimeout(function() {
            $('.slide--hidden').slideUp();
        }, 2000);
    });
});

Upvotes: 1

Related Questions