• 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧

animate.css因动态内容失败

JavaScript 来源:Gracie Sullivan 3次浏览

所以我正在用jquery沿着动画制作唱歌的过程。我设法制作了一个jQuery脚本,使字体颜色在我选择的四种不同颜色之间交换,然后将这些新信息附加到div。animate.css因动态内容失败

我想要做的下一件事是让单词/字母反弹到音乐并做到这一点我选择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("")); 
}); 

===========解决方案如下:

你加入动画反弹跨越。

所以跨度元素应该有下面的CSS工作动画::

span {position: relative; display: block;} 

版权声明:本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系管理员进行删除。
喜欢 (0)