（Textillate.js）フォントが異なる2行など

Question

5秒ごとに変更される2行のテキスト（1つの見出しと1つの下線）を作成しようとしています。しかし、私は2行の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

これを試してみてください。 jsが新しいクラスを生成したため、あなたのCSSは適用されません。

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

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

.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> \t 
 
    <ul class="texts"> 
 
     <li class="hd">underline #1</li> 
 
     <li class="un">underline #2</li> 
 
    </ul> 
 
    </div> 
 
</div>