嘗試preloader時document.ready（）使我的所有腳本崩潰

Question

我正在為學校做一個項目，正在給網站做一些潤色，今天我嘗試從CSS和jQuery的一些教程中做一個預加載器，到目前為止效果很好。 直到只讀取我擁有的main.js特定部分。

漢堡菜單和“返回頂部”按鈕停止工作。 這是我的codepen 。

<section id="preloader">
  <div id="dots">
  <p>Please wait, programmer is sleeping . . .</p>
  <p>Please wait, programmer is sleeping . . .</p>
  <p>Please wait, programmer is sleeping . . .</p>
  <div class="dot" style="animation-name:preloader_1;"></div>
  <div class="dot" style="animation-name:preloader_2;"></div>
  <div class="dot" style="animation-name:preloader_3;"></div>
  <div class="dot" style="animation-name:preloader_4;"></div></div>
  <div id="bg_left" class="pre_half"></div>
  <div id="bg_right" class="pre_half"></div>

$(document).ready(function() {
    $('#dots').delay(950).fadeOut(300, function() {
        $('#bg_left').animate({left: '-50%'}, 600);
        $('#bg_right').animate({right: '-50%'}, 600), function() {
            $('preloader').fadeOut(10);
        }
    });
});

我在控制台上收到此錯誤：

TypeError：arrowLeft為空[Weitere Informationen]

但這只是因為幾個.html文件只有一個main.js

Answer 1

您需要將所有代碼放在$(function(){}) （ $(document).ready()簡寫），以便在加載任何DOM元素之前不會得到任何DOM元素。 您還需要給您的.burger-lines跨度和.backtotop按鈕提供一個比預加載器部分更高的z-index （否則無法單擊它們）。

JSFiddle： http : //jsfiddle.net/56e08dzc/