Question

现在我有一个从右到左滑动的div，然后反过来回到原来的位置。但总的来说，它并不是我想要它的工作方式。我的主要目标是：让用户将鼠标悬停在主div上，然后拉出滑动div。变得棘手的部分如下：如果用户忘记将潜水滑回，我想给它时间框架，这会导致它在经过一段时间后自动关闭。到目前为止，这是我的工作代码：jsfiddle.net/eMsQr/14/。

我的javascript函数：

$(document).ready(function() {
  $("#arrow").hover(
    function(){
      $("#inner").stop().animate({marginRight: "0px", opacity: "1px", height: "100px"}, 500 );
    },
    function(){}
  );
});


$("#arrow").click(function(e){
    $("#inner").stop().animate({marginRight: "-100px", opacity: "1px", height: "100px"}, 500 );
});

Answer 1

您需要使用setTimeout()来设置关闭div的延迟。你还需要在开场功能中使用clearTimeout()来阻止它自动关闭，如果有人mousesout，然后再回来：

var timeout;
$("#arrow").hover(
    function() {
        clearTimeout(timeout); // clear the timer which will close the div, as we now want it open
        $("#inner").stop().animate({
            marginRight: "0px",
            opacity: "1px",
            height: "100px"
        }, 500);
    }, function() {
        timeout = setTimeout(function() {
            $("#inner").stop().animate({
                marginRight: "-100px",
                opacity: "1px",
                height: "100px"
            }, 500);                
        }, 1000); // close the open div 1 second after mouseout.
    }
);

Example fiddle

Answer 2

这是 jsFiddle example ，它通过setTimeout函数设置3秒延迟。：

的jQuery

var cto;
$("#arrow").hover(
function() {
    clearTimeout(cto);
    $("#inner").stop().animate({
        marginRight: "0px",
        opacity: "1px",
        height: "100px"
    }, 500);
}, function() {
    cto = setTimeout(function(){$('#arrow').trigger('click')}, 3000);
});


$("#arrow").click(function(e) {
    $("#inner").stop().animate({
        marginRight: "-100px",
        opacity: "1px",
        height: "100px"
    }, 500);
});

请注意，如果用户将鼠标移开然后将其返回到div，则该框将再次打开，直到它们离开，此时3秒倒数计时器开始。

Answer 3

试试这个：http://jsfiddle.net/vansimke/cJ5pf/

我迷上了mouseleave事件并添加了一个setTimeout。如果您需要稍后取消（即他们重新输入箭头），您可能需要捕获超时

Answer 4

您需要确保在jQuery的function()方法中使用第二个hover。

目前，当用户将鼠标悬停在主div上时，您只会为滑出式div设置动画。您希望它在悬停 out 时也动画。

这是更新的jsFiddle。

Answer 5

在悬停功能中，您可以使用以下行添加额外的行来触发click事件：

setTimeout(function() { $("#arrow").trigger('click'); }, 5000);

5000是触发点击之前要等待的毫秒数。

Answer 6

在此处查看小提琴：http://jsfiddle.net/eMsQr/51/

它使用mouseleave jquery和delay。更改延迟中的值以获得所需的时间。

$("#arrow").mouseleave(function(){   
    $("#inner").stop().delay(500).animate({marginRight: "-100px", opacity: "1px", height: "100px"}, 500 );
});

Jquery Timer Slide功能

6 个答案: