javascript - animate.css 因动态内容而失败

Question

所以我正在使用 jquery 制作一个唱歌动画。我设法制作了一个 jquery 脚本，使字体颜色在我选择的四种不同颜色之间交换，然后将该新信息附加到 div。

接下来我要做的是让单词/字母随着音乐弹跳，为此我选择了 animate.css，因为它轻巧且易于使用。我遇到的问题是，当它添加到我动态创建的文本时似乎不起作用。文本颜色有效，它似乎将正确的类和属性应用于字母/单词，但它似乎从未真正反弹。有什么想法吗？

//fade out the sugar skull div
$(function () {
  $('.sugarskull').fadeIn('slow', function () {
    $(this).delay(15000).fadeOut('slow');
  });
});

//js script to rotate colors on font
$('.lyrics').each(function() {
  var letters = $(this).text().split('');
  var colors = ["#e72f14", "#f59f00;", "#ea4591", "#2a94c7"];
  for (var i = 0; i < letters.length; i++) {
  //animated bounce class is specific to the animate.css library and 
//should make the letters bounce but fails
    letters[i] = "<span class = 'animated bounce' style='color:" + 
colors[(i % colors.length)] + ";'>" + letters[i] + "</span>";
  }
  $(this).html(letters.join(""));
});

Answer 1

您正在为跨度添加动画反弹。

所以 span 元素应该有下面的 css 来工作动画::

span {position: relative; display: block;}