JS / JQuery - 在短时间内点击显示按钮答案

【问题标题】：JS / JQuery - on click show buttons for a short period of timeJS / JQuery - 在短时间内点击显示按钮
【发布时间】：2013-05-29 18:10:40
【问题描述】：

我需要做的是在点击页面内容时显示一个按钮。此按钮只需显示 3 秒钟，然后它必须自动淡出。

这是一个带有示例的 jsfiddle：

http://jsfiddle.net/EuCWp/2/

这是 jquery 代码：

$("#container").click(function(){
    $("#show").fadeIn().delay(400).fadeOut();
});

假设红色框为页面内容，点击事件所附。绿色框是按钮。

问题是，如果我一直按红色方块，绿色按钮应该保持可见，换句话说，每次单击红色方块时都需要将延迟重置为 0。这在我的示例中没有发生，如您所见，如果您连续单击红色框 3 次，您将获得此行为

show, hide, show, hide, show, hide

而不是

show, keep showed, keep showed, hide

有什么建议吗？在此先感谢您的帮助，最好的问候

编辑：

我还想在鼠标悬停时保持该按钮打开.. 我怎样才能得到这种行为？

再次感谢

【问题讨论】：

标签： javascript jquery toggle

【解决方案1】：

您可以使用setTimeout 和clearTimeout：

(function(){
    var timer = 0;
    $("#container").click(function(){
        if (timer) clearTimeout(timer);
        else $("#show").fadeIn();
        timer = setTimeout(function(){
            $('#show').fadeOut();
            timer = 0;
        }, 400);
    });
})();

【讨论】：

感谢dystroy。如果我还需要在悬停时显示该按钮怎么办？我怎样才能做到这一点？
@BeNdErR 我不确定你到底想要什么。也许something like this？
我一直在寻找这样的东西：jsfiddle.net/X9agv/1 你认为这是一个好的解决方案吗？再次感谢

【解决方案2】：

我通过添加标志来修改您的 jquery 代码。

结果如下：http://jsfiddle.net/EuCWp/5/

这里是jquery新代码：

var user_click = "on";
$("#container").click(function(){
  if(user_click=="on")
  {
      user_click = "off"
      $("#show").fadeIn().delay(400).fadeOut(function() {
          // Animation complete
          user_click = "on";
          });
      }
});

【讨论】：