Question

使用Textillate plugin（demo here），我希望能够循环显示一组单词/短语。目前我能够获得2个单词/短语（我想要显示的最大数量）来显示和执行我想要的动画，但是当我添加第三个时，它会在相同的两个单词上显示为第三个单词/短语第三行。我怎么能拥有它所以它循环前两个单词/短语然后下一个2？

HTML：

<div class="phrase-a">
   <p class="tlt">This is the first phrase</p>
</div>

<div class="phrase-b">
   <p class="tlt">This is the second phrase</p>
</div>

<div class="phrase-c">
   <p class="tlt">This is the third phrase</p>
</div>

<div class="phrase-d">
   <p class="tlt">This is the fourth phrase</p>
</div>

JS：

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

Answer 1

通过使用不同的布局，您可以获得我认为具有所需效果的内容：

HTML：

<h1 class="tlt">
    <ul class="texts">
        <li>Some Title</li>   
        <li>Another Title</li>
    </ul>
    <ul class="texts">
        <li>Some Title2</li>   
        <li>Another Title2</li>
    </ul>
</h1>

JS：

$('.texts').textillate({
    minDisplayTime: 1000, 
    in: { effect: 'flipInX', sync: true }, 
    out :{  delay: 3, effect: 'lightSpeedOut', sync: true},
    loop: true
});

请参阅演示here。

使用Textillate JS让多个单词循环

1 个答案: