0

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

我希望在它滑回之前有一个延迟，但由于某种原因 delay() 不起作用。

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

IE：

$('#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;}
4

2 回答 2

2

从 JQuery 文档：

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

尝试在悬停时为您的 handlerOut 函数设置 queue:true

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

<div id="box" class="boxset">
<div id="slidebox"></div>
​&lt;/div>​
于 2012-08-14T22:52:42.727 回答
0

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

于 2012-08-14T22:52:17.273 回答