Question

我在跟随Jonathan Sampson的解决方案时面临一个小问题：jQuery “Please Wait, Loading…” animation?

我使用的是jQuery 2.1.3，但似乎无法让它发挥作用。

$body = $("body");
$(document).ajaxStart(function () {
    $("body").addClass("loading");
    $('.modal').fadeIn(500);
});
$(document).ajaxStop(function () {
    $("body").removeClass("loading");
    $('.modal').fadeOut(500);
});

我的footer.php看起来像这样。所有链接都正常工作，我甚至都没有收到错误消息。

<div class="modal"><!-- Place at bottom of page --></div>       
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="dist/js/bootstrap.min.js"></script>
<script src="js/Magnific-Popup-master/dist/jquery.magnific-popup.js"></script>
<script src="js/kswedberg-jquery-smooth-scroll-dc770ba/jquery.smooth-scroll.js"></script>
<script src="js/main.js"></script>

当我添加＆＃34; loading＆＃34;在firebug中手动操作我的身体它正在工作。所以我认为这是一个jQuery问题。真的很感激一些帮助。

Answer 1

尝试

$(document).on({
   ajaxStart: function() {
     $("body").addClass("loading").find(".modal").fadeIn(500)
   },
   ajaxStop: function() {
     $("body").removeClass("loading").find(".modal").finish().fadeOut(500)
   }
 }).ready(function() {
   $.ajax({url:"", method:"HEAD"})
 });

$(document).on({
   ajaxStart: function() {
     $("body").addClass("loading").find(".modal").fadeIn(500)
   },
   ajaxStop: function() {
     $("body").removeClass("loading").find(".modal").finish().fadeOut(500)
   }
 }).ready(function() {
   $.ajax({url:"http://lorempixel.com/0/0/", method:"HEAD"})
 });

.modal {
  font-size: 36px;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="modal">modal</div>

jQuery加载动画不起作用

1 个答案: