Button hiding not functioning properly

Question

HTML Code:

<div id="slick-slidetoggle">wxyz</div>           
<div id="slickbox" >abcd</div>

JavaScript:

var hoverVariable=false;
var hoverVariable2=false;

$('#slickbox').hide();
$('#slick-slidetoggle').mouseover(function() {
    hoverVariable2=true;
    $('#slickbox').slideToggle(600);
    return false;
})
$('#slick-slidetoggle').mouseleave(function() {
    hoverVariable2=false;
    setTimeout(function (){
    if(!hoverVariable && !hoverVariable2){
    $('#slickbox').slideToggle(600);
    return false;}
    }, 1000);
})
$('#slickbox').mouseleave(function() {                    
    hoverVariable=false;
    setTimeout(function (){
    if(!hoverVariable && !hoverVariable2){                    
    $('#slickbox').slideToggle(600);
    return false;}
    return false;
    }, 1000); 
})
$('#slickbox').mouseover(function() {
        hoverVariable2=false;

    hoverVariable=true;

})

CSS Code:

#slickbox {
    background: black;
    width:100px;
    height: 135px;
    display: none; 
    cursor:pointer;
    color:white;
}
#slick-slidetoggle{
 background: yellow;
    width:100px;
    height: 135px;
    cursor:pointer;
    color:black;

}

Now the desired behaviour is that when mouse is slide over yellow div("wxyz") black div("abcd") should slide down and if mouse is moved out of yellow without moving on to black div, the black div should hide after two seconds.

This is happening. If mouse is moved over black div immediately after moving out of yellow div the black div should not hide as long as the mouse is on the black div. This is also happening.

Next steps are bit difficult to explain but I'll try, when mouse is moved over yellow div and black div comes out then mouse is moved over black div and within two seconds if it moved out of it(black div) then the whole animation goes haywire. Its behaviour is reversed. But if the mouse is kept on black div for more than two seconds and then it is moved out then the whole script runs fine.

This is the link to explain better. http://jsfiddle.net/HAQyK/381/

Steve O · Answer 1 · 2012-11-20T16:25:54.043

Your problem seems to be that the slideToggle in firing twice in quick succession because of your duplicate timeout functions. The cleanest way to deal with timeouts or intervals is to store them in a variable to give you the control of removing them when not needed:

// Defined in global scope
var timer;

$('#slick-slidetoggle').mouseleave(function() {
    hoverVariable2=false;
    // Timer set as function
    timer = setTimeout(function (){
    if(!hoverVariable && !hoverVariable2){
        $('#slickbox').slideToggle(600);
        // Timer no longer need and so cleared
        clearTimeout(timer);
    return false;}
 }, 1000);
});

EDIT: Neglected to add the slideUp/slideDown instead of Toggle as per the correct answer above. See the updated jsFiddle which is now correct: http://jsfiddle.net/HAQyK/390/

Another way you could approach your script is to use jQuerys delay funciton and the stop(); method for animation. Wrap the divs in a container and you've got a much simpler block of code:

$('#slick-container').mouseenter(function() {
    $('#slickbox').stop().slideDown(600);
}).mouseleave(function(){        
    $('#slickbox').stop().delay(1000).slideUp(600);
});

Check it out here: http://jsfiddle.net/HAQyK/387/

Your code works perfectly fine according to the desired behaviour but there is one doubt that I have, when the mouse leaves yellow div and enters black div and leaves black div immediately then mouseleave of both functions get called and in both of them the if(!hoverVariable1 && !hovervariable2) condition satisfies and it slidetoggle() gets called. But still in your code it gets executed only once. Dont understand how. And ther is minor glitch when I re-enter yellow directly from black. Thot I should inform. — Nick Div, Nov 20 '12 at 12:24
If you hover over the black square and re-enter the yellow square the black square slides up. — Bruno, Nov 20 '12 at 12:38

score 1 · Accepted Answer · answered Nov 20 '12 at 11:12

Try replacing slideToggle() with the appropriate slideUp() and slideDown() calls. http://jsfiddle.net/tppiotrowski/HAQyK/386/

var hoverVariable = false;
var hoverVariable2 = false;

$('#slickbox').hide();
$('#slick-slidetoggle').mouseover(function() {
    hoverVariable2 = true;
    $('#slickbox').slideDown(600);
    return false;
})
$('#slick-slidetoggle').mouseleave(function() {
    hoverVariable2 = false;
    setTimeout(function() {
        if (!hoverVariable && !hoverVariable2) {
            $('#slickbox').slideUp(600);
            return false;
        }
    }, 1000);
})
$('#slickbox').mouseleave(function() {
    hoverVariable = false;
    setTimeout(function() {
        if (!hoverVariable && !hoverVariable2) {
            $('#slickbox').slideUp(600);
            return false;
        }
        return false;
    }, 1000);
})
$('#slickbox').mouseover(function() {
    hoverVariable2 = false;
    hoverVariable = true;
})

Thanks this solution was super awesome. – Nick Div Nov 20 '12 at 12:06 — Nick Div, Nov 20 '12 at 12:06

Bruno · Answer 3 · 2012-11-20T11:41:42.220

I re-coded a solution. Checkout the fiddle here

        var hideB;
        var $black = $('#slickbox');
        var $yellow = $('#slick-slidetoggle');

        function showBlack() {
            if( hideB ) window.clearTimeout( hideB );
            $black.stop( true, true );
            $black.slideDown(600);
        }

        function hideBlack() { 
            hideB = setTimeout( function( ) {
                $black.stop( true, true );
                $black.slideUp( 600 ); }
                , 1000 );
        }

        $black.hide();

        $yellow.mouseenter(function() {
            showBlack();
        })

        $yellow.mouseleave(function() {
            hideBlack();
        });

        $black.mouseleave( function( ) {
            hideBlack();
        });

        $black.mouseenter( function( ) {
            showBlack();
        });

@kapilchhattani You're welcome. My solution handles hovering over elements while animations are taking place. You might want to look at the jQuery stop() method. If you hover in and out of the yellow square quickly you will see what I mean :) — Bruno, Nov 20 '12 at 12:11
Oh yes, it does that. For long menus this might come in handy. Thanks for letting me know. — Nick Div, Nov 20 '12 at 12:31

Button hiding not functioning properly

3 Answers3