0

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/

Liam
  • 9,725
  • 39
  • 111
  • 209
  • Have you checked out the queue? Maybe that will help, since you can have callbacks for when each animation finishes. http://api.jquery.com/queue/ – CambridgeMike Mar 30 '12 at 16:58
  • This is a good resource for using the queue, if you go that route. http://stackoverflow.com/questions/1058158/can-somebody-explain-jquery-queue-to-me – CambridgeMike Mar 30 '12 at 18:51

1 Answers1

0

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/

Jocelyn LECOMTE
  • 875
  • 1
  • 7
  • 15