在 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() {&nbsp; &nbsp; setTimeout(function(){&nbsp; &nbsp; &nbsp; $("#spanislas1").addClass("span1");&nbsp; &nbsp; &nbsp; $("#spanislas2").addClass("span2");&nbsp;&nbsp; &nbsp; &nbsp; $("#spanislas3").addClass("span3");&nbsp; &nbsp; &nbsp; $("#spanislas4").addClass("span4");&nbsp; &nbsp; &nbsp; $("#spanislas5").addClass("span5");&nbsp;&nbsp; &nbsp; &nbsp; $("#spanislas6").addClass("span6");&nbsp; &nbsp; &nbsp; $("#spanislas7").addClass("span7");&nbsp; &nbsp; &nbsp; $("#spanislas8").addClass("span8");&nbsp;&nbsp; &nbsp; &nbsp; $("#spanislas9").addClass("span9");&nbsp; &nbsp; &nbsp; $("#spanislas10").addClass("span10");&nbsp; &nbsp; &nbsp; $("#spanislas11").addClass("span11");&nbsp;&nbsp; &nbsp; &nbsp; $("#spanislas12").addClass("span12");&nbsp; &nbsp; &nbsp; $("#spanislas13").addClass("span13");&nbsp; &nbsp; &nbsp; $("#spanislas14").addClass("span14");&nbsp;&nbsp; &nbsp; &nbsp; $("#spanislas15").addClass("span15");&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; },1700);&nbsp; &nbsp; });