Question

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

这是一个带示例的jsfiddle：

这是jquery代码：

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

假设红色框是附加了click事件的页面内容。绿色框是按钮。

问题是，如果我一直按下红色方块，绿色按钮应该保持可见，换句话说，每次点击红色方块时，延迟都需要重置为0.这在我的例子中没有发生，你可以看到，如果你连续点击红色框3次，你就会得到这个行为

show, hide, show, hide, show, hide

而不是

show, keep showed, keep showed, hide

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

编辑：

我还想在用鼠标盘旋时保持按钮打开..我怎么能得到这种行为？

再次感谢

Answer 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);
    });
})();

Answer 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";
          });
      }
});

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

2 个答案: