Javascript 显示/隐藏jQuery不适用于Ajax

您好，我有以下代码的问题： 我藏不住。 我试过Mozilla和Chrome，只有当你把它粘贴到控制台上时，它才起作用。 启动时加载的Html

<div class="loading" style="display: none">

网页上的代码

$( document ).ajaxStart(function() {
    $(".content").fadeOut( "slow", function() {
        $(".loading").show().css("display", "block");
    });
});

$( document ).ajaxStop(function() {
    $(".loading").hide();
    $(".content").fadeIn("slow", function() {
        $('#show').fadeIn("slow");
    });
});

仅在以下情况下有效：

$( document ).ajaxStop(function() {
                $(".loading").css("display", "none");
                $(".content").fadeIn("slow", function() {
                    $('#show').fadeIn("slow");
                });
            });

奇怪的部分-内容也添加了

                $( document ).ajaxStop(function() {
                $(".loading").hide(function(){
                $(".content").fadeIn("slow", function() {
                    $('#show').fadeIn("slow");
                });
                });
            });

内容显示在右侧。

---

谢谢您的回答。

在ajax调用之前调用此选项

$(".loading").show().css("display", "block");

并在成功或错误时隐藏加载

$(".loading").hide().css("display", "none");

---

好的，最后很简单。ajax请求比您预期的更快完成。因此，当请求已经完成时，您在ajaxStart中隐藏或显示的数据没有被完全处理。因此，您在ajaxStop函数中所做的工作由于之前在ajaxStart中调用的显示/隐藏函数的结束而变得混乱。这就是异步请求的陷阱。最简单的方法是添加setTimeout（）

你可以在这里看到有效的解决方案

---

您是否收到任何错误消息？Clean console-weirdI无法，因为此代码在索引上运行时带有一些文本…因此我将新内容加载到页面中。我不知道为什么。@Veenex您能用它制作一个JSFIDLE吗？那我再仔细看看。在制作小提琴的过程中，我经常会发现自己的问题-这排除了可能与其他资源和脚本发生的许多共同影响。@Veeenx没问题-我更新了您的浏览器，但您忘记调用loader（）。@Veeenx我想您是使用FF或其他浏览器查看的。我使用的chrome忽略了这个标签。通常你应该把它们放在

里，更新后的提琴应该可以用。对不起，我昨天不在。如果我能帮你一点忙，我很高兴。我的最后一把小提琴起作用了——至少是用铬合金的。

$(".loading").show().css("display", "block");

$(".loading").hide().css("display", "none");

$(document).on({
  ajaxStart: function() { 
                    $(".content").fadeOut("slow");
                    $(".loading").show();
  },
  ajaxStop: function() {
      setTimeout(function() { 
                     $(".loading").fadeOut("slow");
                     $(".content").show("slow");     
                  }, 1500);                                        
  }    
});