Question

我试图在带有两张幻灯片的部分实施逐字母动画。目前我正在使用jQuery代码，但我担心它与理想选项相差甚远。
这是我的代码示例：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();

第一个问题是我不能这样做，所以第二个句子带有课程＆＃34; secondary＆＃34;仅在第一个完成后运行。我尝试过使用.delay和setTimeout，但这并没有帮助另外，我不确定如何在第二张幻灯片上启动动画，当它被加载时我知道那些东西的插件，但我想在vanilla JavaScript或jQuery，css3中这样做。
很高兴得到任何帮助。
是的，这是我希望它看起来的一个例子 - http://bootstrapart.net/influence/v1.5.3/
是否可以制作，因此每次更改幻灯片时动画都会启动？谢谢。

Answer 1

<强>被修改

点击here查看整个代码是否有效。

我在css中所做的更改： 我设置了opacity html文本标记（<h1>，<h3>和{{ 1}}）到<h4>，所以它们被隐藏了。然后在0函数中，它们再次可见。

我在脚本中所做的更改： 为了延迟启动第二个文本动画，我使用了animation函数：

setTimeout()

要检测轮播的滑动事件，根据Bootstrap Documentation您可以使用此方法：

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

<强>重新修改为了跟踪我们在哪张幻灯片上，我引入了一个变量caled：$('.carousel').on('slid.bs.carousel', function () { // here is where you start the animation for the second slide })。以下是更改幻灯片时启动动画的工作方法：

var $wichSlide

See the working code

字母动画与延迟加载

1 个答案: