jQuery 动画只逐字渲染文本
Posted
技术标签:
【中文标题】jQuery 动画只逐字渲染文本【英文标题】：jQuery animation only rendering text word by word 【发布时间】：2014-02-22 04:40:11 【问题描述】：我不确定这是否更像是一个 jQuery、CSS 或浏览器相关的问题，但这是我一直想知道的：
在下面的 jsfiddle/code 中，动画开始时在动画中逐像素显示单词“this”，但之后直到渲染整个单词才显示扩展跨度的文本；这是为什么？还有，可以改成第一个字的动画吗？
jsfiddle：http://jsfiddle.net/XKVng/
<html>
<style type="text/css">
#mask
z-index: 3;
position: absolute;
float: right;
width: 0;
height: 20px;
color: white;
margin:0;
background-color: black;
#text
position: absolute;
z-index: 0;
background-color: white;
color: black;
width: 200px;
margin:0;
float: right;
height: 20px;
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$("document").ready(function()
var width = $("#text").width();
var opts = "easing" : "linear", "duration" : 4000, "queue" : false;
$("#mask").animate("width" : width, opts);
$("#maskBg").animate("width" : width, opts);
);
</script>
<body>
<span id="mask">this is some text to demo with</span>
<span id="text">this is some text to demo with</span>
</body>
</html>
我一直使用的浏览器是 Chromium 版本 31.0.1650.63，基于 Debian 7.2 构建，在 Debian 7.3 (238485) 上运行。
非常感谢！
【问题讨论】：
【参考方案1】：这是因为在动画过程中单词换行了。您可以通过将white-space:nowrap 添加到#mask 元素来解决此问题，从而防止发生这种默认行为。
UPDATED EXAMPLE HERE
#mask
z-index: 3;
position: absolute;
float: right;
width: 0;
height: 20px;
color: white;
margin:0;
background-color: black;
white-space:nowrap;
【讨论】：
以上是关于jQuery 动画只逐字渲染文本的主要内容，如果未能解决你的问题，请参考以下文章