Chrome 中的 Animation/.animate 有时会“上升”而不是“下降”答案

【问题标题】：Animation/.animate in Chrome sometimes goes "rises" instead of "falls"Chrome 中的 Animation/.animate 有时会“上升”而不是“下降”
【发布时间】：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');
    }

 }

【问题讨论】：

标签： javascript jquery google-chrome jquery-animate

【解决方案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 如果您有任何其他问题，请发表评论，或者如果它回答了您最初的问题，请将此答案标记为正确。