0

使用Textillate Plugin，我试图重新创建简单的演示......但是，我不确定为什么我无法让效果的“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
       }
});
4

2 回答 2

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/

于 2013-07-24T13:54:05.850 回答
0

它工作正常。试试这个：

<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>
于 2013-07-23T19:32:11.937 回答