个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
我不确定这是否更像是一个 jQuery、CSS 或浏览器相关的问题，但这是我一直想知道的:
在下面的 jsfiddle/代码中，动画以在动画中逐个像素地显示单词“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 Version 31.0.1650.63 Built on Debian 7.2，在 Debian 7.3 (238485) 上运行。
非常感谢!
最佳答案
这是因为在动画过程中单词会换行。您可以通过添加 white-space:nowrap 来解决此问题到 #mask 元素，从而防止发生这种默认行为。
#mask {
z-index: 3;
position: absolute;
float: right;
width: 0;
height: 20px;
color: white;
margin:0;
background-color: black;
white-space:nowrap;
}
关于javascript - jQuery 动画只逐字渲染文本，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21446981/
24
4
0
我正在尝试返回数组“seats”，它本质上应该从文本文件返回数据 - 15x30 网格“#”。我已经尝试了很多东西，但我感到很沮丧，因为我对 java 的经验很少。我的代码可以编译，但在调用该方法时无
对于任何输入的字符串，我们需要按任意顺序的单词匹配来查找 super 字符串。即输入字符串中的所有单词必须以任何顺序出现在输出字符串中。例如给定数据集:“字符串搜索”“Java 字符串搜索”“手动 C
我有一个文本文件，其中包含一些我想放入二维数组中的内容。该文本文件由等长的句子组成。如何将每个单词放入数组？ 文本文件的例子是- This is stackoverflow I am user 这个文
我正在编写一个实用程序，它接受一个 .resx 文件并创建一个包含 .resx 文件中所有名称/值对属性的 javascript 对象。这一切都很好，直到 .resx 中的值之一是 该经销商接受电子订
我输入了大量的数学表达式和方程式，我想为每个表达式和方程式打印出 latex 表示形式。到目前为止，我已经尝试过 Sage 和 sympy，但棘手的部分是不对表达式中的术语重新排序。 所以，如果我的输
我正在尝试通过实现异步任务在 android (java) 中流式传输 chatgpt api 的响应(逐字)，但我收到错误。我正在将 java 的 HTTPurlconnection 库与输入和输出
我正在尝试通过实现异步任务在 android (java) 中流式传输 chatgpt api 的响应(逐字)，但我收到错误。我正在将 java 的 HTTPurlconnection 库与输入和输出
我是一名优秀的程序员,十分优秀！