Geek Answers Handbook

Want to smooth animation when resizing DIV - JavaScript

When I hover over the DIV, it grows both in height and in width, but I have no idea how to make it animating smoother, rather than resizing it at the same time

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>
+6
source share
5 answers

Explanation

You should check the transition property in CSS3.

Resources

For more information, see the following links:

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>
+9
source

The best way to achieve this is to make a CSS3 transition when changing the width.

For example, the following:

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

you can use:

transition enter:

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>
+1
source

with CSS3 you don't need javascript to create this 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; }
+1
source

easy way you can use css3 transition

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/

+1
source

More articles:


All Articles