I'm trying to achieve something similar to jQuery Glow or this fiddle.
Specifically I was thinking of a start on load and lasting 10 seconds with the javascript executing at intervals of 100 milliseconds. What's supposed to happen is the background-color or element A will change using a gradient range (start #000 and end #fff) while the opacity of element B will change (start 0 and end 1). So every 100 milliseconds the opacity will increase by 1 (0.01, 0.02, ..., 1.0) and end. All the while element A's background will step along the gradient from #000 to #fff.
I can see by the jQuery Glow that this functionality shouldn't be too difficult, but piecing it together isn't proving that intuitive. That js looks pretty geared towards hovering and links, not defining different values onLoad and ending at a predetermined time.
How could I do this? Thanks.
setTimeout is no-longer your only option in JavaScript animation.
Check out setAnimationFrame in HTML5Rocks, by Paul Irish. Read about it here.
buttery smooth 60 frames per second.
Scroll this page, and...
avoid animations that result in reflow-repaint loops; update your rAF calls to expect a high resolution timestamp as the first parameter;
Lastly,
Get the full rundown of this at: requestAnimationFrame API: now with sub-millisecond precision
Also, nnnnnn is correct. A major strength of jQuery is effects.
But, there is more to the JSWorld than just jQuery, much more.
For starters check out CreativeJS.com.
It is WebGL, but more importantly: three.js (follow @mrdoob).
ExtJS is simply enterprise strength UI, animated interactions.
And Raphael is simply the most advanced SVG, for now.
Other graphical solutions worthy of mention are: D3.js, HTML5 Canvas, and CSS3 Transforms.
EDIT: I thought Adobe Edge was cool. It is an entire new metaphor in HTML Animation Generation, with a keyframe interface... accept, critics couldn't get past the non-semantic DIV's of the beta. I think we will hear more from that team on some advanced HTML animation generator... Yup, they got some new stuff!
Hope that helps. All the best! Nash