Animating a div

daved2424

05-17-2007, 10:29 AM

I have a div that I use as a sidebar. I want to be able to animate in and out. I have discovered easeInOut which I believe will help me achieve what I want, but I cannot get it work, nor can I find any references which clearly explain how to use it. Can anyone explain to me how to use this to change the width of a div or point me towards a good reference explaining me how to use it?

Many thanks.

daved2424

05-17-2007, 01:34 PM

I have found an example piece of code at hesido.com but I am getting an error. This is the code I am using:

var i=document.getElementById('sideBarBorder');
doWidthChangeMem(i,i.currentWidth,170,10,10,0.333);

function doWidthChangeMem(elem,startWidth,endWidth,steps,intervals,powr) {
//Width changer with Memory by www.hesido.com
if (elem.widthChangeMemInt)
window.clearInterval(elem.widthChangeMemInt);
var actStep = 0;
elem.widthChangeMemInt = window.setInterval(
function() {
elem.currentWidth = easeInOut(startWidth,endWidth,steps,actStep,powr);
elem.style.width = elem.currentWidth + "px";
actStep++;
if (actStep > steps) window.clearInterval(elem.widthChangeMemInt);
}
,intervals)

The line that appears to be throwing the error is elem.style.width = elem.currentWidth + "px";

Does anyone have any ideas?

chump2877

05-17-2007, 02:58 PM

You need to use DHTML (http://www.w3schools.com/dhtml/default.asp) and setTimeout().

http://www.schillmania.com/content/projects/javascript-animation-1/
http://developer.apple.com/internet/webcontent/animation.html

daved2424

05-17-2007, 07:12 PM

will my method not work then? seeing as i have already spent quite some time working on that i would rather continue along that route.

chump2877

05-17-2007, 08:12 PM

I've never heard of easeInOut()...try the method that I suggested...for example:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html lang=en>

<head>

<title></title>

<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">

<style type="text/css">

#sidebar
{
position:absolute;
top:50px;
left:0;
height:400px;
background-color:red;
}

</style>

<body>

<div id="sidebar" style="width:50px"> </div>

<script type="text/javascript">

var timer;

window.onload = function()
{
addSidebarEvent('sidebar');
};

function addSidebarEvent(id)
{
var divObj = document.getElementById(id);

divObj.onmouseover = function()
{
if (timer) clearTimeout(timer);
slideIt(id,1);
};

divObj.onmouseout = function()
{
if (timer) clearTimeout(timer);
slideIt(id,2);
};
}

function slideIt(id,state)
{
var divObj = document.getElementById(id);

if (state == 1)
{
if (parseInt(divObj.style.width) < 150)
{
divObj.style.width = parseInt(divObj.style.width) + 5 + "px";
timer = setTimeout('slideIt("'+id+'",'+state+')',50);
}
}
else if (state == 2)
{
if (parseInt(divObj.style.width) > 50)
{
divObj.style.width = parseInt(divObj.style.width) - 5 + "px";
timer = setTimeout('slideIt("'+id+'",'+state+')',50);
}
}
}

</script>

</body>

</html>