Chrome 中的 Animation/.animate 有时会“上升”而不是“下降”
Posted
技术标签:
【中文标题】Chrome 中的 Animation/.animate 有时会“上升”而不是“下降”【英文标题】：Animation/.animate in Chrome sometimes goes "rises" instead of "falls" 【发布时间】：2014-09-24 21:31:01 【问题描述】：我在使用 Chrome 时遇到了一个奇怪的问题；有时刷新时，我的 div（彩色块）会上升而不是下降。我在 Pale Moon 上似乎没有这个问题，但 Chrome 似乎比 Pale Moon 运行得更流畅，所以我想在那里测试它。有任何想法吗？我的代码似乎很好，但我想知道是否需要输入某种“特殊代码”来处理 Chrome 中的打开，或类似的东西。
HTML：
<head>
<script type="text/javascript" src="javascript/jquery-1.11.1.js"></script>
<script type="text/javascript" src="javascript/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="javascript/script.js"></script>
<link href="css/hover/css/hover.css" rel="stylesheet" media="all">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body id="home">
<div class="container">
<p>Website content here</p>
</div>
<div class="footer">
<div class="link" id="portfolio"></div>
<div class="link" id="hamumu"></div>
<div class="link" id="beep"></div>
</div>
</body>
CSS：
*
margin: 0;
body#home
background-color: green;
.link
position: relative;
top: -200px;
width: 40px;
height: 40px;
#portfolio
background-color: yellow;
#hamumu
top: -260px;
background-color: pink;
#beep
top: -295px;
background-color: orange;
html, body
height: 100%;
.container
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -150px;
.footer
margin-left: auto;
margin-right: auto;
height: 150px;
width: 200px;
background-color: red;
JS：
var links = ["#portfolio", "#hamumu", "#beep"];
$(document).ready(function()
//if on home page
if ($("body#home").length > 0)
//run home function
$(function()
homePage();
);
);
//home page function
function homePage()
//place blocks
for (var i=0; i<links.length; i++)
$(links[i]).css("left", i*"40");
//animate blocks falling
for (var i=0; i<links.length; i++)
$(links[i]).animate(
top: i*'-40'
, 1000*(Math.random()*(2-1)+1), 'easeOutBounce');
【问题讨论】：
【参考方案1】：这与您在homePage() 下的字符串上使用数学运算符有关：
$(links[i].css("left", i*"40");
...
top: i*'-40'
在 JavaScript 中，引号（'...' 或 "..."）中的任何内容都被视为字符串对象。如果不先将字符串对象转换为某种数字对象，就无法对它执行数学运算。这意味着某些数学专用运算符（如* 和/）不会对字符串执行任何操作，即使它们是数字字符串（JavaScript 需要告诉区别）。最好将上面两行替换为：
$(links[i].css("left", i*40);
...
top: -i*40
此外，您的代码中存在一些语法错误：
$(document).ready(function()
//if on home page
if ($("body#home").length > 0)
//run home function
$(function()
homePage();
);
);
请注意，不要使用 关闭if() 语句。试试这个：
$(document).ready(function()
//if on home page (not 100% sure what you're trying to achieve with this)
if ($("body#home").length > 0)
homePage();
);
希望对您有所帮助，并祝您学习 jQuery/JS 顺利！
【讨论】：
@Terf 如果您有任何其他问题，请发表评论，或者如果它回答了您最初的问题，请将此答案标记为正确。以上是关于Chrome 中的 Animation/.animate 有时会“上升”而不是“下降”的主要内容，如果未能解决你的问题，请参考以下文章