html - (Textillate.js) 两行不同字体等

Question

我正在尝试创建每 5 秒更改一次的两行文本(一个标题和一个下划线)。但是，我没有设法更改两行的 CSS，也没有找到有关如何在线执行此操作的任何线索。

谁有什么想法？

jsFiddle:http://jsfiddle.net/9dKum/151/

HTML:

<div class="outer-box">
    <div class="tlt">

        <ul class="texts">
            <li>HEADING #1</li>   
            <li>HEADING #2</li>
        </ul>   

        <ul class="texts">
            <li>underline #1</li>   
            <li>underline #2</li>
        </ul>

    </div>
</div>

CSS:

.outer-box {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 1;
}

.tlt {
    text-align: center;
    z-index: 999;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.hd {
    color: #000000;
}

.un {
    color: #ff0000
}

Answer 1

请试试这个。您的 css 未应用，因为 js 生成了新类。

$(document).ready(function(){
  $('.texts').textillate({ 	
    minDisplayTime: 5000,
    initialDelay: 100,	
    loop: true,
    autoStart: true,

    in: {
      effect: 'fadeInUp',			     
      delay: 50,    
      sync: true
    },     
    out: {
      effect: 'fadeOutDown',		
      delay: 50, 
      sync: true
    }	
  });    
});

.outer-box {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 1;
}

.tlt {
  text-align: center;
  z-index: 999;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.texts:first-child span {color: #ff0000;}
.texts:last-child span {color: #000000;}

<link href="http://jschr.github.io/textillate/assets/animate.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://jschr.github.io/textillate/assets/jquery.lettering.js"></script>
<script src="http://jschr.github.io/textillate/jquery.textillate.js"></script>

<div class="outer-box">
  <div class="tlt">
    <ul class="texts">
        <li class="hd">HEADING #1</li>   
        <li class="un">HEADING #2</li>
    </ul>	
    <ul class="texts">
        <li class="hd">underline #1</li>   
        <li class="un">underline #2</li>
    </ul>
  </div>
</div>