时间戳

首页 > 解决方案 > 为什么除了简单的滑入效果外，我无法让任何 textillate.js 动画工作？

javascript - 为什么除了简单的滑入效果外，我无法让任何 textillate.js 动画工作？

问题描述

我是一个菜鸟，我正在尝试在我的网站上启动并运行 textillate.js，但我只能让它产生一个基本的滑入效果。有些动画根本不起作用。我已经阅读了该站点上类似问题的几个答案，并且可以推测这与我对 animate.css 的 CDN 的引用有关，但我终其一生都无法弄清楚出了什么问题。下面是一些简单的标记，只是为了显示我遇到的问题。非常感谢你帮助我。

<!DOCTYPE html>

<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>TEST</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="">

<script
  src="https://code.jquery.com/jquery-3.6.0.js"
  integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
  crossorigin="anonymous"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.css" integrity="sha512-phGxLIsvHFArdI7IyLjv14dchvbVkEDaH95efvAae/y2exeWBQCQDpNFbOTdV1p4/pIa/XtbuDCnfhDEIXhvGQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />


<script src="https://cdnjs.cloudflare.com/ajax/libs/lettering.js/0.7.0/jquery.lettering.js" integrity="sha512-f+oBYjKYemdim4hxvBI29tx1aphY5ffbTlSyN+B1u8YEOAarGu4rBJ++cVzedldrScbJ1Po/rArrrgAFpOXcvg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/textillate/0.4.0/jquery.textillate.js"></script>

<script type="text/javascript" src="./js/textEffects.js"></script>

    </head>
    <body style="background-color:black;color:white;">
        
        <h1 class="desc">This is some H1 text</h1>
        <p class="try">This is a longer paragraph text.  I would really like to know why it isn't working</p>
        
    </body>
</html>

这是Javascript：

$(document).ready(function(e) {

    const myName = $('.desc');
    const foot = $('.try');
    console.log("The script is recognized");
    myName.textillate({
        in: { effect: 'fadeInRight' },
        loop: true,
        out: { effect: 'hinge' },
        delayScale: 1,
        delay: 150,
        });


foot.textillate({
    
    in: { effect: 'fadeInRight' }, 
loop: true,
        out: { effect: 'rollOut' },
        delayScale: 1,
        delay: 150,
    });
});

标签： javascriptcdn

解决方案

我解决了这个问题，而不是使用 animate.css 网站上提到的 CDN 链接，我去了这里https://cdnjs.com/libraries/animate.css，所有以前的版本和 4 个不同版本的相同提供 CDN（令人困惑！）。这是对我有用的链接：

https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.compat.css

推荐阅读