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

JS / JQuery - on click show buttons for a short period of time

本文关键字：显示 按钮 短时间 JQuery JS      更新时间：2023-09-26

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

下面是一个示例:

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

任何建议吗?提前感谢您的帮助，致以最诚挚的问候

编辑:

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

再次感谢

您可以使用setTimeout和clearTimeout:

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

我通过添加一个标志来修改你的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";
          });
      }
});
相关文章：