Question

我试图在x秒后淡入div，但是如果点击一个按钮，立即淡入或更快延迟。但是，按钮单击不会覆盖默认值。

 $(document).ready(function() {             
      $('#thepopupdiv').delay(12000).fadeIn(700);

      $("#skipIntroBTN").click(function() {
           $('#thepopupdiv').fadeIn(700); 
      });
 });

/ ****更新**** / 感谢@Nenad Vracar，除了一个bug之外，我得到了这个工作。如果你等待，弹出窗口会加载。但是，如果单击该链接，则会加载弹出窗口，但是当您关闭弹出窗口时，会再次加载。如果使用链接打开，则不应再次加载。

请参阅小提琴：https://jsfiddle.net/omarel/9d7sua0h/12/

Answer 1

您可以在这里使用setTimeout

var fade = function() {
  $('div').fadeIn(700);
}
$('button').click(function() {
  fade()
});

setTimeout(fade, 12000);

div {
  height: 50px;
  width: 50px;
  background: black;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>CLick</button>
<div></div>

Answer 2

jQuery中的.delay()函数作为队列运行，一旦被调用就无法取消。如果您想覆盖延迟逻辑，建议使用setTimeout：

$(document).ready(function() {   
      $("#skipIntroBTN").click(function() {
        $('#thepopupdiv').fadeIn(700); 
      });

      setTimeout(function() {
        $('#thepopupdiv').fadeIn(700);
      }, 12000);
 });

您可以查看.delay() documentation以获取有关此限制和用例的更多信息。

<强>更新

关于你对这个问题的更新，你有正确的想法，但是在错误的地方。如果您将跳过的类的检查移到fade()函数中，您将能够停止重新出现div。目前，您可以查看setTimeout来电，这（除非您是一个非常超人的快速点击者）将始终通过该跳过的课程检查。尝试以下更新应解决问题：

 $(document).ready(function() {

   //load popup

   var fade = function() {
     // move the hasClass check into the fade function
     if (!$('#thepopupdiv').hasClass('skipped'))
       $('#thepopupdiv').fadeIn(700);
   }

   $("#skipIntroBTN").click(function() {
     $('#thepopupdiv').fadeIn(700).addClass('skipped');
     fade();
   });

   setTimeout(fade, 5000);

   $(".closeit").click(function() {
     $("#thepopupdiv").fadeOut(0001);
   });

 });

#thepopupdiv {
  width: 100px;
  height: 50px;
  color: #fff;
  background-color: #000;
  display: none;
  padding: 10px;
  margin-bottom: 100px;
}

#thepopupdiv a {
  color: #fff;
}

#skipIntroBTN {
  cursor: pointer;
  width: 100px;
  height: 50px;
  color: #000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="skipIntroBTN">
  <a href="#">click here for popup</a>
</div>

<div id="thepopupdiv">
  <a href="#" class="closeit">click to close popup NOW</a>
</div>

Answer 3

我打算在下面评论正确答案，但我没有评论权限。大声笑我觉得在你的评论中你说有一个按钮可以将div淡出然后定时器会在它到期后将其恢复。

还有一个名为clearTimeout（）的JavaScript函数可以在单击按钮时停止初始计时器

这是我认为你要求https://jsfiddle.net/81u97ux9/1/

的工作小提琴

HTML

<div id="thepopupdiv" style="display: none">
    <p>
        This Is a hidden Div
        <button id="fadeOut">
        Fade Out
        </button>
    </p>
</div>
<button id="skipIntroBTN">
    Press me
</button>

的Javascript

$(document).ready(function() {             
  var fade = function() {
    $('#thepopupdiv').fadeIn(700);
  }
  var timer = setTimeout(fade, 10000)
  $("#skipIntroBTN").click(function() {
       fade(); 
       clearTimeout(timer);
  });
  $("#fadeOut").click(function() {
       $('#thepopupdiv').fadeOut(700);

  });
});

在按钮上单击淡入div，否则在x秒后淡入

3 个答案: