在JavaScript中定位DIV的百分比動畫

我決定通過練習一些常用模塊來提高我的JavaScript技能。在JavaScript中定位DIV的百分比動畫

我正在創建一個固定的反饋按鈕，當您按下它時出現，並在您再次按下時出現按下。一切正常，但我希望它是動畫。

我用這個代碼把它做

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％

任何幫助感動？

來源

2012-06-23 Koen

你使用jQuery嗎？如果是的，請試試這個：

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

來源

2012-06-23 17:36:59

不，我使用的是普通的JavaScript的。 – Koen

你可以使用jQuery嗎？ –

我可以，但我打算在使用庫使我的代碼更清潔之前學習純JavaScript。所以，如果你對普通的JavaScript有一個很好的建議！ – Koen

你可能會需要像超時這將改變一小步一小步這實際上是「動畫」的位置，這裏

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

來源

2012-06-23 18:27:21

感謝帖子，不幸的是這不起作用.. – Koen

你可以讓你的代碼小提琴嗎？我會編輯它，並希望使其工作，謝謝。 –

在JavaScript中定位DIV的百分比動畫

回答

相關問題