Question

As the title says, for some reason a box is not delaying before it slides back up.
Right now if you hover over a div called “#box” with the class of “.boxset”, the div “#slidebox” appears. #slidebox also has the class of “.boxset”. If you move your mouse away from these two divs, #slidebox will slideUp. In this regard it is working beautifully.

I want there to be a delay before it slides back up, but for some reason delay() is not working.

The critical line of code is in the second of the two functions under hover()

I.E:

$('#slidebox').stop().delay(600).slideUp({  

Can anyone see anything wrong?

Thanks a bunch for any help!

The jQuery

$('#slidebox').hide();
$('.boxset').hover(
            function() {  
    $('#slidebox').stop().slideDown(
        {
        duration:600, 
        easing: "swing",
        queue: false,
        complete: function() {
        $('#slidebox').removeAttr('style');}  //End complete   
        } //End object literals
        ); // End slideDown
                    } // End first function
    ,
    function() {
        $('#slidebox').stop().delay(600).slideUp({   
        duration:600, 
        easing: "swing",
        queue: false,
        } // End object literals
                    ); //End slideUp
                    } // End second function   

); // End Hover

The HTML

<div id="box" class="boxset"></div>
<div id="slidebox" class="boxset"></div>

The CSS

#box {
    width: 100%;
    height: 35px;
    background-color: orange;
    drop-shadow: 2px 2px 1px rgba(0,0,0,.25);
    border-radius: 10px 0px 10px 0px;
    color: white;
    diplay:block;
    text-align: right;

}

#slidebox { 
    width:100%;
    height: 100px;
    background-color: rgba(23,34,1, .1);
    border-radius: 10px 10px 0px 10px;
    display: block;}

Answer 1

I think in this case, you want to use a setTimeout.

var timeOut;
$('.boxset').hover(
    function() {
        clearTimeout(timeOut);
        $('#slidebox').stop().slideDown({
            duration:600, 
            easing: "swing",
            queue: false,
            complete: function() {
                $('#slidebox').removeAttr('style');}  //End complete   
        });
    },
    function() {
        $('#slidebox').stop();
        timeOut=setTimeout(function(){
            $('#slidebox').slideUp({  
                duration:600, 
                easing: "swing",
                queue: false,
            });
        }, 600);
    }

http://jsfiddle.net/HDLCE/1/