jQuery点击后或10秒后重定向

Question

我在一个网站上有一个闪屏，其中有一个ID为“splash”的div，我正在尝试使该div淡入，然后如果用户点击该div，则淡出并重定向到主站点。 如果用户没有点击它，它只会在10秒后淡出并重定向。

计时重定向正在工作，但点击功能不起作用。

    <script type="text/javascript">
  $(document).ready(function() {
  $('#splash').hide();  
        $('#splash').fadeIn(1000, function() {
              $(this).delay(10000).fadeOut(1000, function() { 
               window.location = 'http://www.examle.com'; });
              $(this).click().fadeOut(1000,function() { 
               window.location = 'http://www.example.com'; });
         });
  });
</script>

任何帮助都将是极好的。

- Brooke.

Answer 1

试试这个：

$(document).ready(function() {
  $('#splash').hide();
  $('#splash').click(function(){
             $(this).fadeOut(1000,function() { 
                     window.location = 'http://www.example.com'; });
             });
  $('#splash').fadeIn(1000, function() {
           window.setTimeout ( function() {
             $('#splash').fadeOut(1000, function() { 
               window.location = 'http://www.example.com'; }) }
             , 10000);
     });
 });​

我对示例所做的更改：

我将设置单击处理程序移到fadeOut函数之外（在我看来更好的实践），并将您对delay（）的调用更改为setTimeout（）。

区别在于，delay（）不允许在后台执行其他jQuery代码，而setTimeout（）则可以。

- Josiah

---

谢谢，以上代码仍然无法使用点击功能。 - Brooke.

抱歉，错误不是我最初想的那样。请尝试更新后的代码示例 :) - Josiah

问题在于它无法在点击时停止delay()。因此，如果您单击，则仍需等待延迟结束。很奇怪。（但看起来您已经发现了这一点：）） - Brooke.

尝试使用我发布的更新代码（我编辑了我的答案）。对我来说，它按照预期工作。正如我在更新的答案中提到的那样，我用setTimeout()替换了delay()，因为后者不允许执行进一步的jQuery代码。 - Josiah

这个也不起作用，它在执行淡入后立即执行淡出，而没有考虑到超时时间。 - Brooke.