使用jQuery淡出DIV并淡入下一个DIV

Question

Im trying to build a slider from scratch only im a bit stuck, I basically want each div to fade out and the next one to fade in straight afterwards, once each div has faded in, i want the image within that to animate, I've made a fiddle to try and explain. Thanks for any help!

http://jsfiddle.net/FeqkB/2/

Answer 1

Basically, you have to make use of callback functions when you want to create sequential animations. If you do it the way it is done in your fiddle, you launch all the effects at the same time, resulting in a messy behavior. The functions fadeIn, fadeOut and animate all take a callback function. Let's say you want fadeIn, then animate, then fadeOut.

1. fadeIn is called with a callback which will animate
2. animate is called with a callback which will fadeOut

I forked your fiddle to give you an example, but I did it just for the first div. If you understand this mechanism, it will be easy to extend it for any number of effects. Here it is : http://jsfiddle.net/bBxUQ/1/