Tengo n cantidad de imagenes, con un estado inicial oculto, al cargar la pagina quiero que se vaya mostrando una imagen tras otras con .show(), puede ser, que esta animacion dura unos 0.8 segundos, hasta aqui todo bien, pero que mientras se muestra esta imagen con la animacion .show() se reprodusca un sonido, (un efecto de entrada por ejemplo), una vez termine esta animacion y el sonido para la primera imagen, que pase lo mismo con la siguiente, y asi sucesivamente hasta las ultima imagen que haya.
Esta son las imagenes
Código:
<body>
<img src="images/images1.jpg" id="1" width="150" height="150" class="hide" />
<img src="images/images2.jpg" id="2" width="150" height="150" class="hide" />
<img src="images/images3.jpg" id="3" width="150" height="150" class="hide" />
<img src="images/images4.jpg" id="4" width="150" height="150" class="hide" />
<img src="images/images5.jpg" id="5" width="150" height="150" class="hide" />
<img src="images/images6.jpg" id="6" width="150" height="150" class="hide" />
<img src="images/images7.jpg" id="7" width="150" height="150" class="hide" />
<img src="images/images8.jpg" id="8" width="150" height="150" class="hide" />
<img src="images/images9.jpg" id="9" width="150" height="150" class="hide" />
</body>
Como pueden ver estan ocultas, ahora cuando la pagina carga hago esto:
Código:
$(function(){
$("img#1").slideDown(1000);
//Aqui reprodusco sonido
});
Lo que quiero es que una vez termine la animacion para la primera imagen comienze la animacion para la segunda, y asi sucesivamente...