Javascript jQuery动画仅逐字渲染文本_Javascript_Jquery_Css_Google Chrome_Jquery Animate

Javascript jQuery动画仅逐字渲染文本

javascript jquery css google-chrome

Javascript jQuery动画仅逐字渲染文本,javascript,jquery,css,google-chrome,jquery-animate,Javascript,Jquery,Css,Google Chrome,Jquery Animate,我不确定这是否更像是一个jQuery、CSS或与浏览器相关的问题，但这正是我一直想知道的：在下面的jsfiddle/代码中，动画开始时在动画中逐像素显示单词“this”，但之后在渲染整个单词之前，它不会显示扩展范围的文本；为什么呢？另外，它可以被改变成第一个单词的动画吗 jsfiddle： #面具{ z指数：3；位置：绝对位置；浮动：对；宽度：0；高度：20px；颜色：白色；保证金：0；背景色：黑色； } #正文{ 位置：绝对位置； z指数：0；背景色：白色；颜色：黑色；

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

在下面的jsfiddle/代码中，动画开始时在动画中逐像素显示单词“this”，但之后在渲染整个单词之前，它不会显示扩展范围的文本；为什么呢？另外，它可以被改变成第一个单词的动画吗

jsfiddle：


#面具{
z指数：3；
位置：绝对位置；
浮动：对；
宽度：0；
高度：20px；
颜色：白色；
保证金：0；
背景色：黑色；
}
#正文{
位置：绝对位置；
z指数：0；
背景色：白色；
颜色：黑色；
宽度：200px；
保证金：0；
浮动：对；
高度：20px；
}
$（“文档”）.ready（函数（）{
变量宽度=$（“#文本”）.width（）；
var opts={“放松”：“线性”，“持续时间”：4000，“队列”：false}；
$（“#掩码”）。设置动画（{“宽度”：宽度}，选项）；
$（“#maskBg”）.animate（{“width”：width}，opts）；
});
这是一些要演示的文本
这是一些要演示的文本

我使用的浏览器是Chromium 31.0.1650.63，它构建在Debian 7.2上，运行在Debian 7.3（238485）上

多谢各位

这是因为单词在动画中换行。您可以通过添加到

#mask

元素来解决此问题，从而防止出现此默认行为

<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>

#mask {
    z-index: 3;
    position: absolute;
    float: right;
    width: 0;
    height: 20px;
    color: white;
    margin:0;
    background-color: black;
    white-space:nowrap;
}