javascript - 在 JavaScript 中为百分比定位的 DIV 设置动画

Question

我决定通过练习一些常用模块来提高我的 JavaScript 技能。

我正在创建一个固定的反馈按钮，当您按下它时会出现，再次按下时会下降。一切正常，但我希望它是动画的。

我用这段代码来完成它

function rollUp(item){
       if(item.className == "on") {
          item.className="off";
          document.getElementById("container").style.top = "97%";
       } else {
          item.className="on";
          document.getElementById("container").style.top = "78.5%";
       }
    }

现在我只是没有让那些百分比动画，我发现了很多关于通过 px 动画 div 的描述，但我没有得到这个工作。

所以 div 必须从顶部位置 97% 移动到 78.5%

有什么帮助吗？

Answer 1

你在使用 jQuery 吗？如果是，请试试这个：

function rollUp(item){
   if(item.className == "on") {
      item.className="off";
      $("#container").animate({top: "97%"});
   } else {
      item.className="on";
      $("#container").animate({top: "78.5%"});
   }
}

Answer 2

你需要像超时这样的东西，它会以小步骤改变位置，实际上是“动画”，在这里

function rollUp(){
var ph=document.getElementById("container").style.top.toString();
ph.replace("px","");
var phi=parseInt(ph);
if(phi<800){
       if(item.className == "on") {
          item.className="off";
          document.getElementById("container").style.top = (phi+10).toString()+"px";
       } else {
          item.className="on";
          document.getElementById("container").style.top = "600px";
       }
Window.setTimeout(roolUp(), 300);
}
}