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/

Answer 1

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