Jquery Timer Slide 功能答案

【问题标题】：Jquery Timer Slide functionJquery Timer Slide 功能
【发布时间】：2012-04-03 15:44:38
【问题描述】：

现在我有一个从右向左滑动的 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 );
});

【问题讨论】：

标签： javascript jquery jquery-ui javascript-events

【解决方案1】：

这是一个 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 秒倒计时开始。

【讨论】：

效果很好，但称为“内部”的滑动 div 是用户需要输入信息的表单。一旦用户离开名为“inner”的滑动 div，是否有一种可能的方式开始计时。
这是一个新的 jsFiddle：jsfiddle.net/j08691/eMsQr/59。只要鼠标悬停在表单 div 上，它就会保持打开状态。

【解决方案2】：

您需要使用setTimeout() 设置延迟关闭div。您还需要在打开函数中使用clearTimeout() 来阻止它在有人鼠标悬停时自动关闭，然后再返回：

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

【讨论】：

效果很好，但称为“内部”的滑动 div 是用户需要输入信息的表单。一旦用户离开名为“inner”的滑动 div，是否有一种可能的方式开始计时。

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

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

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

这是更新后的jsFiddle。

【讨论】：

【解决方案5】：

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

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

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

【讨论】：

【解决方案6】：

在这里查看小提琴：http://jsfiddle.net/eMsQr/51/

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

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

【讨论】：