Question

我想为我的网站创建预加载器的印象。我有<div class="loading">，应该淡入淡出，直到<div id=page-wrap>的内容被加载。

现在我正在使用基于时间的解决方案来猜测，但当然不准确：

<script type="text/javascript">
// fade site in when loaded
$("#page-wrap").css("display", "none");
$(window).bind("load",function(){
    $("#page-wrap").fadeIn(2000);
});

// blink markers
$(".loading").hide();
$(".loading").fadeIn(200).fadeOut(200).fadeIn(200).fadeOut(200).fadeIn(200).fadeOut(200).fadeIn(200).fadeOut(200).fadeIn(200).fadeOut(200).fadeIn(200);
</script>

如何使这更复杂并实际将fadeIn / fadeOut绑定到页面加载？

Answer 1

有点奇怪的设置，但到底是什么：）

尝试这样的事情：

<script type="text/javascript">
  $("#page-wrap, .loading").hide();
  $(window).load(function(){
    $(".loading").stop(true, true).hide();
    $("#page-wrap").fadeIn(2000);
  });
  function fadeLoop() {
    $(".loading").fadeIn(200).fadeOut(200, fadeLoop)
  }
  fadeLoop();
</script>

这会导致淡出循环重复直到停止，.stop()会执行，不调用fadeLoop回调，并停止循环。

jQuery：animate元素直到页面加载

1 个答案: