Letter by letter animation with delay in loading

问题:

I'm trying to implement letter by letter animation on section with two slides. Currently I'm using jQuery code for that, but I'm afraid it's far from the ideal option.
Here's my code example: codepen

$.fn.animation = function ()  {
  //get the welcome msg element
  var $message = $(this);
  //get a list of letters from the welcome text
  var $getList = $(this).text().split("");
  //clear the welcome text msg
  $(this).text("");
  //loop through the letters in the list array
  $.each($getList, function(idx, element) {
    //create a span for the letter and set opacity to 0
    var newElement = $("<span/>").text(element).css({
      opacity: 0
    });
    //append it to the welcome message
    newElement.appendTo($message);
    //set the delay on the animation for this element
    newElement.delay(idx * 90);
    //animate the opacity back to full 1
    newElement.animate({
      opacity: 1
    }, 1100);
  });
};

$('.introduction').animation();
$('.secondary').animation();

First problem is that I can't do, so the second sentence with class "secondary" runs only after first one is finished. I've tried to use .delay and setTimeout, but that doesn't help.
Also I'm not sure, how to start animation on second slide, when it's loaded.
I know there's plugins for that stuff, but I'd like to do that in vanilla JavaScript, or jQuery, css3.
Would be glad for any help.
And yeah, here's an example how I would like it to look - http://bootstrapart.net/influence/v1.5.3/
Is it possible to make, so the animation starts every time, when slide is changed?
Thanks.

回答1:

Edited

Click here to see the whole code working.

Changes I made in css: I set the opacity of html text tags (<h1>,<h3> and <h4>) to 0, so they are hidden. Then in the animation function they are made visible again.

Changes I made in script: To start the second text animation with delay I used setTimeout() function:

setTimeout(function(){
    $('.secondary').animation();
},2000);

To detect the slide event of carousel, according to Bootstrap Documentation you can use this method:

$('.carousel').on('slid.bs.carousel', function () {
  // here is where you start the animation for the second slide
})

Re-Edit To track on which slide we are I introduced a variable caled: var $wichSlide. Here is the working method to start the animation when slide is changed:

$('.carousel').bind('slid.bs.carousel', function (e) {
    if($whichSlide == 1){
      //set $whichSlide position for the next slide event
      $whichSlide = 2
      //start to animate the text
      $('.introduction').animation();
      setTimeout(function(){
  $('.secondary').animation();
},2000);
      /*set the text on the second slide to be invisible
       * because we don't want it to appear before animation starts
       */
      $('.slide2').css("opacity",0);
    }else if($whichSlide == 2){
      $whichSlide = 1;
      $(".carousel").carousel("pause");
      $(".slide2").animation();
      setTimeout(function(){
       $(".carousel").carousel();
      },3000);
      $('.introduction').css("opacity",0);
      $('.secondary').css("opacity",0);
    }
});

See the working code