jquery - 使用 Textillate JS 循环多个单词

Question

使用Textillate 插件（此处为演示），我希望能够循环浏览一组单词/短语。目前，我可以获得 2 个单词/短语（我想要显示的最大数量）来显示和执行我想要的动画，但是当我添加第三个时，它会在与相同的两个单词上显示为第三个单词/短语第三行。我怎样才能让它循环通过前 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
});

在此处查看演示。