HTML best practice to animate and fallback
===

I have to do some animations in a homepage like Apple's iPhone homepage

http://www.apple.com/iphone/

Mine are quite simpler, just some left to right slide in (with fade in) for a div, stay a few seconds, slide out and the same effect to the following div.

I'm planning to use jQuery's .animate() since I'm using jQuery for almost everything else in the site but I have some doubts:

1. Is jQuery the best way to animate objects? I also considered using CSS3 transitions but I suspect jQuery is more compatible with not so modern browsers (IE cough... cough...)

2. What would be the event to fire the animation? How can I be sure the image in the div is loaded before animating it?

3. The initial state for the elements would be 0% opacity si I can then animate them to 100%. If someone has javascript turned off or there's any error in the page and the animation function doesn't run, the elements would stay invisible to them. Having the initial state 100% opacity and then change it to 0% to animate it would make a blink if the turning it to 0% by code doesn't run before the element is displayed. Can I prevent this?

4. Whats is the best way to time the animation? Having a $(element).delay(N), N being the time it takes for the previous elements to go in, show and go out doesn't seem right.

I know all this might probably be covered somewhere else. If there's a good article or tutorial on how to achieve this just point me to it. Thanks.