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

Question

使用Textillate plugin ( demo here )，我希望能够循环浏览一组单词/短语。目前，我可以获得 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
});

查看演示 here .