javascript - .delay()无法与slideUp()一起使用

如标题所述，由于某种原因，盒子在滑回之前并没有延迟。
现在，如果将鼠标悬停在类别为“ .boxset”的名为“ #box”的div上，则会显示div“ #slidebox”。 #slidebox也具有“ .boxset”类。如果将鼠标从这两个div移开，＃slidebox将滑动。在这方面，它工作得很好。

我希望在回滑之前有一个延迟，但是由于某些原因，delay（）无法正常工作。

关键代码行在hover（）下的两个函数中的第二个中

即：

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

谁能看到任何错误？

多谢您的协助！

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

HTML

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

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

最佳答案

我认为在这种情况下，您想使用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/