Rolling Division Dimensions

Smoothly Transitioning Object Dimensions

[itledi]

Hello,

What I'm looking to do is to create some code to where if a user clicks on some text, a div expands from a height of 100px to a height of 200px.

It's simple enough, I just need to create a function that sets the height of the object to my second height. However, instead of just "jumping" from 100 to 200px, I would like the box to smoothly transition or "roll out" to the new height.

How would I go about doing this? Would I create 100 steps for a new height of 101px, 102px 103px... 199px, 200px, each with a fraction of a second delay between?

Is there a better way to do this?

Thanks!

[Trace]

Yeah, you're on the right track. Just create a function that will loop until you reach your desired size incrementing the size a little at each loop.

Something like this (untested)

Javascript

<script type="text/javascript">
var intervalID = 0;
var originalSize = 100;
var newSize = 200;

function startInterval(){
intervalID = setInterval ( "enlarge()", 1 );
}

function enlarge(){
document.getElementById("myDiv").style.height = originalSize + 'px';
originalSize = originalSize + 5; // <-- bigger the # the faster it will grow

if (originalSize >= newSize){
// stops the loop
clearInterval(intervalID);
}
}
</script>

Html

<div style="border:1px solid red; width:100px; height:100px;" id="myDiv">
<a href="#" onclick="startInterval(); return false;">enlarge</a>
</div>

[Fotiman]

Note also that there are JavaScript libraries that have these types of animation effects already built (so rather than re-invent the wheel, you could use one of those).

[itledi]

Thank you for the replies.

Tonight, I'll be able to try out the code.

Last night, I did see some library effects. Something like SPRY and Moo.fx. Those libraries are massive in size.

I've always been concious of my file size, trying to make my site as fast as I can for the end user. Will going through a simple loop give me the same effect as from one of those libraries, without all that bloated code? Or do those libraries do something more complex than a loop for their accordian effect?

Thanks

[Fotiman]

The point of a library is that it offers you much more than a single item. For example, the Yahoo UI Library [developer.yahoo.com] has great DOM and Event utilities, animation effects, a bunch of widgets, and much more. And with the Yahoo Library, the scripts are all minimized (stripped of excess whitespace and comments), and compressed. If you use the Yahoo hosted versions of the files, then there's also a chance the end user might already have the files cached in his/her browser (if he/she visited another site that used the Yahoo UI Library).