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);
}
}

动画在JavaScript中定位DIV的百分比

2 个答案: