jQuery 动画只逐字渲染文本答案

【问题标题】：jQuery animation only rendering text word by wordjQuery 动画只逐字渲染文本
【发布时间】：2014-02-22 04:40:11
【问题描述】：

我不确定这是否更像是一个 jQuery、CSS 或浏览器相关的问题，但这是我一直想知道的：

在下面的 jsfiddle/code 中，动画开始时在动画中逐像素显示单词“this”，但之后直到渲染整个单词才显示扩展跨度的文本；这是为什么？还有，可以改成第一个字的动画吗？

<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) 上运行。

非常感谢！

【问题讨论】：

标签： javascript jquery css google-chrome jquery-animate

【解决方案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;
}

【讨论】：