使用jquery为html元素文本的每个字符设置动画效果？
我想使用jquery为从html元素中获取的文本字符串设置动画：
Animate
对于jquery部分：
$(document).ready(function() { $( "h1" ).animate({ fontSize: "90px" }, 1500 ) .animate({ fontSize: "50px" }, 1500 ); });
这会动画整个h1文本值，但我想为h1文本中的每个字符设置动画。
第二个jquery部分：
$(document).ready(function () { var animateChar = $("h1").text(); for(i=0; i<animateChar.length; i++) { //alert(i + ': ' + animateChar.charAt(i)); // for every animateChar.charAt[i] want to run this //jquery animation. //$( "h1" ).animate({ fontSize: "90px" }, 1500 ) //.animate({ fontSize: "50px" }, 1500 ); } });
这是我陷入困境的一点。 谢谢
您可以在DOM元素上使用jQuery函数。 不是人物分开。 您应该为每个字符使用不同的DOM元素：
ANI...
这样的事情必须要做到这一点
$('span').each(function() { var that = $(this); setTimeout(function() { that.animate({ fontSize: "90px" }, 1500 ) .animate({ fontSize: "50px" }, 1500 ); },that.index()*100); });
-编辑-
工作jSFIDDLE
– 编辑2-
没有凌乱的HTML JSFIDDLE （它仍然很乱，但javascript使它变得混乱;））
如果你想保持你的HTML清洁，我会添加以下方法将你的字符包装在span标签中。 在动画之前使用wrapCharacters($("h1"))执行此onLoad，然后为$(".animate")返回的字符$(".animate") 。
function wrapCharacters(obj) { var html = ''; var text = obj.text(); for (var i = 0; i < text.length; i++) { html += '' + text[i] + ''; } obj.html(html); }
Animate $(document).ready(function() { var count = 0; function animation(elm) { if(count == $(".animate").length) { clearInterval(id); return; } $( elm ).animate({ fontSize: "90px" }, 1500 ) .animate({ fontSize: "50px" }, 1500 ); count++; } var id = setInterval(animation($(".animate")[count]), 3200);//Give time for animation to run. });
这将为每个角色制作动画。