Il carosello di avvio fa apparire il testo lettera per lettera

Question

Sto usando il carosello di bootstrap per il cursore, su ogni diapositiva c'è del testo sopra.

Desidero che il testo sopra le diapositive venga visualizzato una lettera per lettera.

ho quasi risolto ..

Ma ci sono 2 problemi

1. Sulla prima diapositiva il testo non compare affatto
2. Se l'utente passa a qualche altra scheda su il browser indica che la finestra corrente non è a fuoco, quindi tutto si incasina.

Here is my fiddle

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 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">3companies with Inbound Marketing</div> 

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

JS:

$(document).ready(function() {  
    $('#js-carousel').carousel({ 
     interval: 5000 
    }); 

    $('#js-carousel').on('slid.bs.carousel', function() { 
     var showText = function (target, message, index, interval) { 
     if (index < message.length) { 
      $(target).append(message[index++]); 
      setTimeout(function() { showText(target, message, index, interval); }, interval); 
     } 
     }     
     var str = $(this).find(".active .mystring").html(); 
      $('.active .demo-txt').html("");   
      showText(".active .demo-txt", str, 0, 100);   
    }); 
    }); 

Answer 1

Invece di settimeout uso setInterval funzione. Utilizzare anche clearInterval per cancellare la pianificazione quando inizia una nuova diapositiva. (Credo che questo è il tuo secondo problema.)

Qui è il vostro target js del file:

$(document).ready(function() {  
    $('#js-carousel').carousel({ 
     interval: 5000 
    }); 
    var handler; 
    var interval = 5000; 
    var index = 0; 
    function showText(target, message, index, interval) { 
     if (index < message.length) { 
      $(target).append(message[index]); 
     } 
    } 

    function iteration() { 
     if(handler){ 
      clearInterval(handler); 
     } 
     index = 0; 
     var str = $(this).find(".active .mystring").html(); 
     $('.active .demo-txt').html(""); 
     showText(".active .demo-txt", str, index++, 100);   
     handler = setInterval(function(){ 
      showText(".active .demo-txt", str, index++, 100); 
     }, 100); 
    } 

    //on each carousel slide change: 
    $('#js-carousel').on('slid.bs.carousel', iteration); 
    //start immediately for your first problem: 
    iteration.bind($('#js-carousel'))(); 
}); 

Answer 2

è perché il vostro f unzione si trova all'interno dell'evento di diapositiva. Alla partenza, il carosello non scivola ...

Fiddle: https://jsfiddle.net/Lbasa2jh/5/

JS:

$(document).ready(function() { 
    var showText = function (target, message, index, interval) { 
    if (index < message.length) { 
      $(target).append(message[index++]); 
      setTimeout(function() { showText(target, message, index, interval); }, interval); 
     } 
     }; 

    $('#js-carousel').carousel({ 
     interval: 5000 
    }); 

     var str0 = $(this).find(".active .mystring").html(); 
     $('.active .demo-txt').html("");   
     showText(".active .demo-txt", str0, 0, 100);  

    $('#js-carousel').on('slid.bs.carousel', function() { 

     var str = $(this).find(".active .mystring").html(); 
      $('.active .demo-txt').html("");   
      showText(".active .demo-txt", str, 0, 100);   
    }); 
    }); 

Answer 3

Il timer può essere difficile quando la linguetta diventa inattivo. Ho spostato il codice e cancellato il timeout per assicurarmi che il timeout sia pulito quando si avvia una nuova diapositiva.

Ho notato un problema (non sempre) quando si passa da una scheda diversa è che il carosello si sposta in realtà alla diapositiva successiva più veloce di 5 secondi, causando l'incompleto del testo.

https://jsfiddle.net/vLwm58Ln/

$(document).ready(function() { 
 
    $('#js-carousel').carousel({ 
 
    interval: 5000 
 
    }); 
 

 
    var showText = function(target, message, index, interval) { 
 
    if (index < message.length) {  
 
     \t $(target).append(message[index++]); 
 
     timer = setTimeout(function() { 
 
      showText(target, message, index, interval); 
 
     }, interval); 
 
    } 
 
    }, timer; 
 
    
 
    //First time, this triggers right away instead of waiting for the slide to move 
 
    showText(".active .demo-txt", $('#js-carousel').find(".active .mystring").html(), 0, 100); 
 
    
 
    $('#js-carousel').on('slid.bs.carousel', function() { 
 
    //clear any messed up timeout from prev slide 
 
    clearTimeout(timer); 
 
    //clear message that may be incomplete from the previous text animation 
 
    $('.prevActive').removeClass('prevActive').html(''); 
 
    var str = $(this).find(".active .mystring").html(); 
 
    $('.active .demo-txt').addClass('prevActive').html(""); 
 
\t showText(".active .demo-txt", str, 0, 100); 
 
    }); 
 
});

.carousel-inner { 
 
    position: relative; 
 
} 
 

 
.carousel-inner .overlay-effect { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    background: rgba(0, 0, 0, 0.6); 
 
} 
 

 
.carousel-inner .caption { 
 
    color: #ffffff; 
 
    font-weight: bold; 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    margin: auto 0; 
 
    height: 100px; 
 
    z-index: 9999; 
 
    left: 5%; 
 
} 
 

 
.carousel-inner .caption h1, 
 
.carousel-inner .caption h2 { 
 
    font-weight: bold; 
 
    line-height: 1.6; 
 
} 
 

 
.carousel-inner .caption h1 { 
 
    font-size: 64px; 
 
} 
 

 
.carousel-inner .caption h2 { 
 
    font-size: 44px; 
 
} 
 

 
.carousel-inner .demo-txt { 
 
    border-bottom: 4px solid #ec8422; 
 
    padding-bottom: 5px; 
 
}

<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.2.js"></script> 
 
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
<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 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">3companies with Inbound Marketing</div> 
 

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