在调整DIV大小时需要平滑动画

当我在DIV上空盘旋时,它的高度和宽度都会增加,但我不知道如何让它更加平滑,而不是一次调整大小

function chg()
{
  document.getElementById("d1").innerHTML="Great Job!";
  document.getElementById("d1").style.width="300px";
  document.getElementById("d1").style.height="200px";
}

function chg2()
{
  document.getElementById("d1").innerHTML="Hover Over Me!";
  document.getElementById("d1").style.width="230px";
  document.getElementById("d1").style.height="160px";
}

div
{
  background-color:RGB(177,0);
  color:white;
  font-size:large;
  height:160px;
  width:230px;
  text-align:center;
  line-height:150px;
}

<!DOCTYPE html>
<html>
<body>
<div onmouSEOver="chg()" onmouSEOut="chg2()" id="d1">Hover Over Me!</div>
</body>
</html>

解决方法

说明

你应该看看CSS3中的过渡属性.

资源

例

function chg() {
  document.getElementById("d1").innerHTML = "Great Job!";
  document.getElementById("d1").style.width = "300px";
  document.getElementById("d1").style.height = "200px";
}

function chg2() {
  document.getElementById("d1").innerHTML = "Hover Over Me!";
  document.getElementById("d1").style.width = "230px";
  document.getElementById("d1").style.height = "160px";
}

div {
  background-color: RGB(177,0);
  color: white;
  font-size: large;
  height: 160px;
  width: 230px;
  text-align: center;
  line-height: 150px;
  transition: all .5s linear;
}

<div onmouSEOver="chg()" onmouSEOut="chg2()" id="d1">Hover Over Me!</div>

在调整DIV大小时需要平滑动画 – JavaScript

解决方法

相关文章