Want a Smooth Animation When Resizing DIV - JavaScript

with CSS3 you don't need javascript to create that effect..

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

The best way to accomplish this would be to do a CSS3 transition when the width changes.

Such as the following:

div
{
    transition:width 1s ease-in-out;
}

Explanation

You should check out the transition property in CSS3.

Resources

Check the following links for more information:

  • CSS3 Transitions
  • Using CSS transitions

Example

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, 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>

Tags:

Javascript

Html

Recent Posts