在 jquery 预加载器之后运行 css 动画

Question

我正在开发一个网站，其中的英雄横幅中有一个动画。不过，还有一个 Jquery 预加载器。如果我使用以前的代码（见下文），CSS动画开始发生，同时预加载器在这里，所以根据你的wifi，你可能只会看到它的结尾。    // Preloader$(window).on('load', function (event) {    $('.preloader').delay(1200).fadeOut(500);});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><!-- **********************PRELOADER******************************************* --><div class="preloader">    <svg id="Calque_1" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 47.19 52.93">          <defs>            <style>.cls-1.pepe{fill:#000000;}.cls-2.mojo{fill:#61bbbd;}</style>           </defs>          <path class="cls-1 pepe" d="M278,426.42a18.9,18.9,0,0,1-19.67,20.67c-9.92-.44-18-9.32-18-19.25V394.61a.37.37,0,0,1,.37-.37h7.83a.38.38,0,0,1,.37.37V428a10.54,10.54,0,0,0,10.5,10.59,10.33,10.33,0,1,0-3.71-20l-.08,0h-.09a.41.41,0,0,1-.41-.41v-8.07a.35.35,0,0,1,.29-.35,18.71,18.71,0,0,1,5.19-.34A18.94,18.94,0,0,1,278,426.42Z" transform="translate(-240.34 -394.19)"/>          <g class="petit-cercle">          <path class="cls-2 mojo" d="M259.21,424.12h-3.52a.57.57,0,0,0-.57.57v3.52a2.46,2.46,0,0,0,0,.28,4.08,4.08,0,0,0,4.22,3.8,4.13,4.13,0,0,0,3.94-4A4.09,4.09,0,0,0,259.21,424.12Z" transform="translate(-240.34 -394.19)"/>          </g>    <div class="hero-image">        <div class="animated-text text-center">          <a href="#">            <span>B</span>            <span>e</span>            <span>c</span>            <span>o</span>            <span>m</span>            <span>e</span>            <span> </span>            <span>a</span>            <span> </span>            <span>m</span>            <span>e</span>            <span>m</span>            <span>b</span>            <span>e</span>            <span>r</span>          </a>          <div class="entering">            <h1>Enter the Bali world</h1>          </div>        </div>              </div>如果我尝试 jQuery 文档就绪/或 Javascript windows onload 方法在预加载器之后渲染它。动画已经不行了。我在代码中没有看到任何建议或错误？

Answer 1

由于有 1200 毫秒的延迟和 500 毫秒的淡出，您可以在应用类之前使用 1700 毫秒的超时：

$(document).ready(function() {

    setTimeout(function(){

      $("#spanislas1").addClass("span1");

      $("#spanislas2").addClass("span2"); 

      $("#spanislas3").addClass("span3");

      $("#spanislas4").addClass("span4");

      $("#spanislas5").addClass("span5"); 

      $("#spanislas6").addClass("span6");

      $("#spanislas7").addClass("span7");

      $("#spanislas8").addClass("span8"); 

      $("#spanislas9").addClass("span9");

      $("#spanislas10").addClass("span10");

      $("#spanislas11").addClass("span11"); 

      $("#spanislas12").addClass("span12");

      $("#spanislas13").addClass("span13");

      $("#spanislas14").addClass("span14"); 

      $("#spanislas15").addClass("span15");        

    },1700);

    });