小编use*_*698的帖子

我正在使用bootstrap carousel作为滑块,每张幻灯片上都有一些文字.

我希望幻灯片上的文字能够逐字出现.

我几乎解决了..

但是有两个问题

1. 在第一张幻灯片上,文字根本没有出现
2. 如果用户访问浏览器上的其他选项卡意味着当前窗口没有焦点,那么一切都搞砸了.

这是我的小提琴

HTML

<main>
      <div class="container">
        <div class="block-wrap">
          <div id="js-carousel" class="carousel slide" data-ride="carousel">
            <!-- Wrapper for slides -->
            <div class="carousel-inner" role="listbox">
              <div class="item active">
                <img src="http://cdn.theatlantic.com/assets/media/img/photo/2015/11/images-from-the-2016-sony-world-pho/s01_130921474920553591/main_900.jpg?1448476701" alt="Chania">
                <div class="caption">

                  <div class="mystring hide">companies with Inbound Marketing</div>
                  <h4>We help <div class="demo-txt"></div> </h4>
                </div>
              </div>

              <div class="item">
                <img src="http://cdn.theatlantic.com/assets/media/img/photo/2015/11/images-from-the-2016-sony-world-pho/s01_130921474920553591/main_900.jpg?1448476701" alt="Chania">
                <div class="caption">
                <div class="mystring hide">companies with Inbound Marketing</div>

                  <h4>We help  <div class="demo-txt "></div> </h4>
                </div>
              </div>

              <div class="item">
                <img src="http://cdn.theatlantic.com/assets/media/img/photo/2015/11/images-from-the-2016-sony-world-pho/s01_130921474920553591/main_900.jpg?1448476701" alt="Flower">
                <div class="caption">
                <div class="mystring hide">2companies with …