Fade two images with different delay

Question

I'm trying to fade 2 different images on the same page with a different delay. The first image appears and then the second one appears.

Here's my fiddle :http://jsfiddle.net/jarod51/4RvWY/3/

the css:

.panel img {
        opacity:0;
        -moz-transition: opacity 3000ms ease-in-out;
        -webkit-transition: opacity 3000ms ease-in-out;
        transition: opacity 3000ms ease-in-out;
    }

    .shown img{
        opacity: 1;
    }

.img2{
    opacity:0;
        -moz-transition: opacity 10000ms ease-in-out;
        -webkit-transition: opacity 10000ms ease-in-out;
        transition: opacity 10000ms ease-in-out;
}

.shown1 img2{
        opacity: 1;
    }

the html :

<div id="home" class="panel">
        <h2>Home</h2>
        <img src="http://lorempixum.com/200/200/people/3"/>
        &nbsp;
        <img class="img2" src="http://lorempixum.com/200/200/people/1"/>

    </div>

my jquery attempt:

$('#wrap').find('.shown').removeClass('shown');
                $target.addClass('shown');
                $('#wrap').find('.shown1').removeClass('shown1');
                $target.addClass('shown1');

Answer 1

There's a couple of things you may fix to get it working:

1) You're missing a dot (.) before the img2 in the .shown1 img2 rule. You're referring to a class and not to an HTML tag. That must be like this:

.shown1 .img2{
    opacity: 1;
}

2) If you want to apply a delay to the CSS transition, you can specify it after the duration in the shorthand transition property, or in the transition-delay property. For example, for a 2s delay you can use:

.panel .img2{
    opacity:0;
    -moz-transition: opacity 10000ms 2s ease-in-out;
    -webkit-transition: opacity 10000ms 2s ease-in-out;
    transition: opacity 10000ms 2s ease-in-out;
}

See it in action here: http://jsfiddle.net/FL3RK/2/

Anyway, IMHO it would be nicer if you use the same duration (3000ms or 3s) for both transitions.

EDIT: If you don't want to wait for the animation to be completed to start it over again, put the transition property in your .shown1 .img2 rule like this:

.shown1 .img2{
    opacity: 1;
    -moz-transition: opacity 3000ms 2s ease-in-out;
    -webkit-transition: opacity 3000ms 2s ease-in-out;
    transition: opacity 3000ms 2s ease-in-out;
}

Working fiddle: http://jsfiddle.net/FL3RK/3/

Answer 2

var finished = 0;
var callback = function (){
  // Do whatever you want.
  finished++;
}
$(".div"+finished).animate(params, duration, null, callback);

Answer 3

html

  <img src="http://lorempixum.com/200/200/people/2"/>
  <img src="http://lorempixum.com/200/200/people/1"/>
  <img src="http://lorempixum.com/200/200/people/2"/>
  <img src="http://lorempixum.com/200/200/people/4"/>

css

img {display:none;}

script

$("img").each(function(i) {
               $(this).fadeIn(2000*(i+1));
          });

see the fiddle http://jsfiddle.net/vishnurajv/px7U5/