1

我需要做的是在点击页面内容时显示一个按钮。此按钮只需显示 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

有什么建议吗？提前感谢您的帮助，最好的问候

编辑：

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

再次感谢

4

2 回答 2

5

您可以使用setTimeout和clearTimeout：

(function(){
    var timer = 0;
    $("#container").click(function(){
        if (timer) clearTimeout(timer);
        else $("#show").fadeIn();
        timer = setTimeout(function(){
            $('#show').fadeOut();
            timer = 0;
        }, 400);
    });
})();
于 2013-05-29T09:21:33.380 回答
1

我通过添加一个标志来修改您的 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";
          });
      }
});
于 2013-05-29T09:27:17.617 回答