Question

正如标题所说，由于某种原因，一个盒子在滑回之前不会延迟。现在，如果将鼠标悬停在名为“#box”的div上，其类别为“.boxset”，则会显示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;}

Answer 1

来自JQuery文档：

queue：一个布尔值，指示是否将动画放入效果队列。如果为false，则动画将立即开始。作为在jQuery 1.7中，队列选项也可以接受一个字符串，在这种情况下动画将添加到该字符串表示的队列中。

尝试为悬停

上的handlerOut函数设置queue：true

更改Div元素的嵌套并从内部div中删除“boxset”类，以便您的事件处理程序不会多次触发。这应该可以解决不一致的行为。

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

Answer 2

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

.delay（）无法使用slideUp（）

2 个答案: