Textillate-effect与<a href="#"></a>结合使用时显示所有无序列表项

Question

我正在使用Textillate对无序列表应用效果。

这项工作到目前为止一切顺利。不幸的是，当我在＆lt;中组合超链接时ul＆gt; - 元素，它显示所有＆lt; li＆gt;开始效果时的无序列表。

我做了一个快速的jsfiddle：http://jsfiddle.net/deschroe/9hskE/

有人知道为什么它会在第一行中全部收起来吗？ 目标是，它一次只显示一个。

这里也是代码：

<div id="white_box">
  <div class="container white">
    <div class="row">
      <div class="span12">
        <h1>Recent works:</h1>
        <h2 class="tlt">
          <ul class="texts">
            <li><a href="#">1 Link</a></li>
            <li><a href="#">2 Link</a></li>
            <li><a href="#">3 Link</a></li>
          </ul>
        </h2>
      </div>
    </div>
  </div>
</div>

和css：

#white_box {
    width: 100%;
    height: 100px;
    bottom: 0;
    background-color:#FFF;} 

.container.white {
    background-color:#fff;} 

.container.white h1 {
    font-family: "pragmatica-web", Arial, Helvetica, sans-serif;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.040em;
    margin-top: 25px;
    color:#515050;
    text-align:left;
    position:relative;
    display:inline-block;
}
.container.white h2 {
    font-family: "pragmatica-web", Arial, Helvetica, sans-serif;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.040em;
    margin-top: 25px;
    color:#328ff5;
    text-align:left;
    position:relative;
    display:inline-block;   
}