Question

使用Textillate Plugin，我试图重新创建简单的demo ...但是，我不确定为什么我无法让效果的“OUT”部分工作。我希望文本块从左侧淡入并淡出到右侧。但我很糟糕，我尝试的任何东西似乎都没有用。如果有人使用过此插件，也许有人可以指出我正确的方向。谢谢！

注意：当我将效果添加到“out”或“in”时，该插件根本不起作用。

<div class="tlt">
    <ul class="texts">
        <li>Hello World!</li>
        <li>I hate you</li>
    </ul>
</div>

$('.tlt').textillate({
       in: {
           shuffle: false,
           sync: true
       },
       out: {
             effect: 'FadeOutRightBig',
             shuffle: false,
             sync: true
       }
});

Answer 1

效果名称区分大小写，因为它们对应于animate.css中定义的特定类。

将FadeOutRightBig更改为fadeOutRightBig。

$('.tlt').textillate({
   in: {
       shuffle: false,
       sync: true
   },
   out: {
         effect: 'fadeOutRightBig',
         shuffle: false,
         sync: true
   },
   loop: true
});

http://jsfiddle.net/jschr/vzsUd/

Answer 2

它工作得很好。这个：

<html>
<head>
<link href="animate.css" rel="stylesheet" type="text/css" />
<script src="jquery.min.js"></script>

<script src="jquery.lettering.js"></script>
<script src="jquery.textillate.js"></script>
<script>
$(document).ready(function(){
    $('.tlt').textillate({
       in: {
           shuffle: false,
           sync: true
       },
       out: {
             effect: 'FadeOutRightBig',
             shuffle: false,
             sync: true
       }
});

    })
</script>
</head>
<body>
<div class="tlt">
    <ul class="texts">
        <li>Hello World!</li>
        <li>I hate you</li>
    </ul>
</div>
</body>
</html>

无法让Textillate插件正常工作

2 个答案: