Using jsAnim.js

I'v开发者_Python百科e been trying to set up a basic test animation using jsanim.js and using their example site to set up my html, css and js. However, I just can't figure it out (not a developer...designer!) and there isn't just a simple html, css, js file to download showing how to say animate a DIV left to right.

The examples of how the library works are clear but I'm lacking something in the set up and looking at their source on the site is nuts...too much going on in there.

Thanks to anyone with experience with jsAnim.js http://www.jsanim.com

Best,

Mark

put this script in your header.

<script>
function doAnimation(){
var manager = new jsAnimManager(40);
myObject = document.getElementById("box");   
var anim = manager.createAnimObject("box"); 
anim.add({property: Prop.width, from: 50, to: 500, duration: 2000});
}
</script>

In your html put a div with and ID of "box". And a button to trigger the function.

<div id="box"></div>
<button onclick="doAnimation()">animate</button>

I've found jsAnim can be paired with jQuery, but after looking at it more closely it all seemed somewhat under-developed and a bit redundant. I do most of my animations in jQuery, and if I need to animate on a bezier or arc I used a plugin called Weepy.

Oh, and don't forget to include a path the your jsAnim file in your header.

I had troubles with this

You need to make sure the div you are trying to animate is loaded on the page before the javascript tries to animate it

<div id="divToAnimate"> 
</div>

<script language="javascript">
    var manager = new jsAnimManager(40); 
    etc......
</script>

Otherwise it won't work.