Question

如果在一定时间内（5秒）未点击网站上的其他图片（.stickman），我想要一张图片（fadeIn）到.lighSwitchOff。我找不到任何具体的帮助。 .click是否存在相反的情况？

如：

$(".lightSwitchOff").notclicked(5000 (function(){
    $(".stickman").fadeIn();
});

Answer 1

要执行此操作，您可以使用计时器在指定时间后淡入.stickman元素，并在单击.lighSwitchOff元素时清除该计时器，如下所示：

var timer = setTimeout(function() {
    $('.stickman').fadeIn();
}, 5000);

$('.lighSwitchOff').click(function() {
    clearTimeout(timer);
});

Answer 2

首先在点击事件上设置变量或数据属性。

假设我正在设置窗口变量

window.info =  true;
$(".lightSwitchOff").click(function() {
    window.info = false;
});

现在使用setTimeout

检查一段时间后

setTimeout(function() {
    if (window.info) {
        $(".stickman").fadeIn();
    }
}, 6000);

Answer 3

您可以编写自己的插件，如下所示，扩展jQuery。

$.fn.notClicked = function(options, callback) {
  var $this = this;
  $this.timeOut = setTimeout(function() {
    if (typeof callback == 'function') {  //check if callback param is a function
      callback.call(this);  //trigger callback
    }
  }, options);
  $(this).click(function(){
      clearTimeout($this.timeOut);
  });
}

$(".lightSwitchOff").notClicked(5000, function() {
  $(".stickman").fadeIn();
});

<强> Demo

Answer 4

尝试类似https://jsfiddle.net/n9vj0hzp/

的内容

<强> HTML

.stickman{
  display:none;
}

<强> CSS

$(document).ready(function(){
    var count=0;
  $('.lighSwitchOff').on('click', function(){
    count=1;

  });



  setTimeout(function(){ 

  if(count==0)
  $('.stickman').fadeIn();

  }, 5000);


});

<强>的jQuery

program files/mongodb/server/3.2/bin

如果在一段时间后没有点击div，如何触发图像淡入？

4 个答案: