I was wondering is there any alternatives to Jquery for animating Div heights in JavaScript? While Jquery is great and relatively small, I dont want to load the entire jquery just for this one functionality. And considering this is for a WebOs app (not a web app), I need to keep the loading time as small as possible.

Thanks

I was wondering is there any alternatives to Jquery for animating Div heights in JavaScript? While Jquery is great and relatively small, I dont want to load the entire jquery just for this one functionality. And considering this is for a WebOs app (not a web app), I need to keep the loading time as small as possible.

Thanks

• javascript
• jquery
• webos

Share Improve this question Follow asked Oct 19, 2011 at 14:43 levilevi 25.2k1818 gold badges6363 silver badges7676 bronze badges 4

• What animations are you looking for? – Richard JP Le Guen Commented Oct 19, 2011 at 14:45
• animate height from 0 to 100px or vise versa within a specified amount of time. – levi Commented Oct 19, 2011 at 14:46
• As a note, Zepto.js is a lightweight alternative for jQuery targetted at Webkit phones. It uses -webkit-transition for its animations though, so that's not a lot of help if you want a scripted solution. – Brian Nickel Commented Oct 19, 2011 at 15:04
• Just use CSS3 Transitions, if you can. – c69 Commented Oct 19, 2011 at 17:08

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

function animateHeight(obj, height){

   var obj_height = obj.clientHeight;

   if(obj_height <= height){ return; }
   else {
       obj.style.height = (obj_height - 5) + "px";
       setTimeout(function(){
           animateHeight(obj, height);
       }, 500) 
   }
}

Nice fiddle: http://jsfiddle/maniator/Z6cbq/

WebOS uses mobile WebKit, so you could do most of the work with CSS:

#someElement {
    -webkit-transition: height 100ms linear;
    height: 0;
}

Then your JavaScript is really easy:

document.querySelector('#someElement').style.height = '100px'
// - or -
document.querySelector('#someElement').className += ' open';
// where #someElement.open has a defined height.

Here's some more details: http://pre101./blog/2009/11/10/a-guide-to-css-transitions-in-webos/

A bare bones animation library weighing in at 1 KB:

https://github./relay/anim/