CODEWITHSUNDEEP
javascripthtml
hurtbox
hurtbox

Reputation: 386

Want a Smooth Animation When Resizing DIV - JavaScript

When I am hovering over a DIV, it increases in both height and width but I have no idea how to make it animate smoother instead of resize all at once

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;
}
<!DOCTYPE html>
<html>
<body>
<div onmouseover="chg()" onmouseout="chg2()" id="d1">Hover Over Me!</div>
</body>
</html>

Upvotes: 21

Views: 86505

Answers (5)

Romulo
Romulo

Reputation: 5104

Explanation

You should check out the transition property in CSS3.

Resources

Check the following links for more information:

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>

Upvotes: 33

Putra Soerya
Putra Soerya

Reputation: 19

the easy way, you can use css3 transition

the hard way, 

var d = document,
    d1 = d.querySelector("#d1");

// simple transition with javascript
function jsTransitionScale(elm, width, height, speed) {
    var FPS = 60;

    var original_width = elm.offsetWidth,
        original_height = elm.offsetHeight;

    var width_range = width - original_width,
        height_range = height - original_height;

    var timeout = speed / FPS,
        width_change = width_range / FPS,
        height_change = height_range / FPS;

    var finish = new Date().getTime() + speed;

    var begin = setInterval(function () {
        original_width += width_change;
        original_height += height_change;

        elm.style.width = original_width + "px";
        elm.style.height = original_height + "px";

        if (new Date().getTime() >= finish) {
            elm.style.width = width;
            elm.style.height = height;
            clearInterval(begin);
        }
    }, timeout);
}

function chg() {
    jsTransitionScale(d1, 100, 100, 1000);
}

function chg2() {
    jsTransitionScale(d1, 230, 160, 1000);
}

d1.addEventListener("mouseover", chg);
d1.addEventListener("mouseout", chg2);
div {
    background-color:RGB(177, 0, 0);
    color:white;
    font-size:large;
    height:160px;
    width:230px;
    text-align:center;
    line-height:150px;
}
<div id="d1"></div>

http://jsfiddle.net/putrasurya/qb2x3zga/

Upvotes: 1

Dedi Suhaidi
Dedi Suhaidi

Reputation: 71

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

Upvotes: 4

Alvaro Silvino
Alvaro Silvino

Reputation: 9743

you can use:

transition property please read:

http://www.w3schools.com/css/css3_transitions.asp

function chg()
{
  document.getElementById("d1").innerHTML="Great Job!";
  document.getElementById("d1").className="hover";
}

function chg2()
{
  document.getElementById("d1").innerHTML="Hover Over Me!";
  document.getElementById("d1").className="";
}
div
{
  background-color:RGB(177,0,0);
  color:white;
  font-size:large;
  height:160px;
  width:230px;
  text-align:center;
  line-height:150px;
  transition:  1s ease-in-out;
}
div.hover
{
   width:300px ;
   height:200px; 
   transition:  1s ease-in-out;
}
<!DOCTYPE html>
<html>
<body>
<div onmouseover="chg()" onmouseout="chg2()" id="d1">Hover Over Me!</div>
</body>
</html>

Upvotes: 1

Jake Chasan
Jake Chasan

Reputation: 6550

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

Upvotes: 13

Related Questions