在链接之前如何显示（DOM）消息

Question

我只想告诉用户，下一个操作（单击链接）将花费一些时间...（以避免重新加载页面并再次单击链接）。

我试过了：

<p id="message" style="display:none" class="notification">This could take a while, please sit down and relax</p>

<script>
    $(document).ready(function() {
      $("a").click(function() {
        $("#message").show();
      });
    });
</script>

但是消息没有出现。 点击获得了预期的效果。

Answer 1

 $(function() { $("a").click(function() { $("#message").stop(true, true).show(250); $("#message").delay(2000).hide(250); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <a href = "#">test foo link</a> <p id="message" style="display:none" class="notification">This could take a while, please sit down and relax</p> 

像这样吗？

Answer 2

为了使其更适合跨浏览器（Safari，Chrome出现问题），最好使用另一个事件：

<script>
    $(document).ready(function() {
      $("a").on("mousedown", function(e) {
        $("#message").show();
      });
    });
</script>

奇迹般有效。 当然，释放鼠标时它们可以退出链接，但是在mouseup上，您会遇到与单击时相同的问题。

如果您确实希望它100％，则可以在mouseup上在文档级别隐藏消息：

<script>
    $(document).ready(function() {
      $("a").on("mousedown", function(e) {
        $("#message").show();
      });
      $(document).on("mouseup", function(){
        $("#message").hide();
      });
    });
</script>