逐字母动画加载延迟 [英] Letter by letter animation with delay in loading

问题描述

我正在尝试用两张幻灯片的部分实现逐字母动画。当前，我正在为此使用jQuery代码，但恐怕它离理想的选择还很遥远。

这是我的代码示例： codepen

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();

第一个问题是我做不到，因此第二类 secondary仅运行在第一个完成后。我尝试使用.delay和setTimeout，但这无济于事。

另外，我不确定如何在加载第二张幻灯片时开始播放动画。

我知道有用于这些东西的插件，但是我想在香草JavaScript或jQuery css3中做到这一点。

会很乐意为您提供帮助。

是的，这是我想要的示例- http://bootstrapart.net/influence/v1.5.3 /

是否可以制作，所以每次更改幻灯片时动画都会开始？

谢谢。

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.

推荐答案

已编辑

点击< a href = http://codepen.io/alincrescens/pen/QKvBAX rel = nofollow>此处以查看整个代码的工作情况。

Click here to see the whole code working.

我在CSS中所做的更改： 我设置了HTML文本标签的 opacity （< ; h1> ，< h3> 和< h4> ）到 0 ，因此它们是隐藏的。然后在动画函数中再次使它们可见。

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.

我在脚本中所做的更改： 为了延迟播放第二个文本动画，我使用了 setTimeout（）函数：

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

要检测轮播的幻灯片事件。 com / javascript /＃carousel-methods rel = nofollow>引导文档，您可以使用以下方法：

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
})

重新编辑
为了跟踪我们在哪个幻灯片上引入了一个变量已校准： var $ wichSlide 。这是更改幻灯片后开始动画的工作方法：

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);
    }
});

查看工作代码

这篇关于逐字母动画加载延迟的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！