亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

Textillate JS-JQuery 動畫不是選中的(而且總是一樣的)

Textillate JS-JQuery 動畫不是選中的(而且總是一樣的)

撒科打諢 2022-11-27 16:16:30
我正在使用textillate.js為文本添加動畫。我的 html 頁面看起來像這樣<!DOCTYPE html><html><head>    <meta charset="UTF-8">    <title>Textillate</title>    <link rel="stylesheet" href="animate.min.css">    <script src="jquery-3.5.1.min.js"></script>    <script src="jquery.lettering.js"></script>    <script src="jquery.textillate.js"></script></head><body>    <div class="tlt">        Hello world    </div>        <script>        $('.tlt').textillate({ in: { effect: 'bounceInDown' } });    </script></body></html>其中包含的腳本和 css 取自以下鏈接:https://raw.githubusercontent.com/jschr/textillate/master/jquery.textillate.jshttps://code.jquery.com/jquery-3.5.1.min.jshttps://raw.githubusercontent.com/davatron5000/Lettering.js/master/jquery.lettering.jshttps://raw.githubusercontent.com/animate-css/animate.css/master/animate.min.css問題是,無論我effect在in對象中設置什么,結果總是默認的 textillate 動畫:字符從左到右一個接一個地出現,我可以控制出現字母的順序(例如設置shuffle: true等。 ),但不是動畫類型。這幾乎是 textillate 在他的 github 頁面上提供的示例代碼,所以我不知道問題出在哪里。
查看完整描述

1 回答

?
翻翻過去那場雪

TA貢獻2065條經驗 獲得超14個贊

我認為問題與 animate.css 參考有關,我更改它并且它有效。希望能幫助到你。


    $('.tlt').textillate({ in: { effect: 'flipInY' } });


    $('.tlt2').textillate({ in: { effect: 'rollIn' } });


    $('.tlt3').textillate({"loop":true,"in":{"effect":"fadeInDownBig","shuffle":false,"reverse":false,"sync":false},"out":{"effect":"hinge","shuffle":true,"reverse":false,"sync":false}});

<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.compat.css" rel="stylesheet"/>

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/lettering.js/0.6.1/jquery.lettering.min.js"></script>

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


<div class="tlt">

        Hello world

</div>



<div class="tlt2" >

        Hello world

</div>



<div class="tlt3" >

        Hello world

</div>


查看完整回答
反對 回復 2022-11-27
  • 1 回答
  • 0 關注
  • 193 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號