jQuery Animation with fade in and fade out

jQuery Animation with fade in and fade out

Looking for some help on creating an effect where various images fade in
and fade out. So, I have 3 different images (grouped) that fades in one at
a time. For example img-a then img-b then img-c and all 3 images show,
pause and the next group of images start. The effect I'm looking to do is
similar to this, but instead of the boxing just moving from position a to
b I'd like to have them spread across and next to each other. The fiddle
comes from this post. Any help would be much appreciated. Thank you guys!
HTML:
<div class="container">
<div class="js-imgFade">
<div class="slideGroup-one">
<img class="imgSlide-a" src="//placehold.it/200x200&text=Image 1">
<img class="imgSlide-b" src="//placehold.it/200x200&text=Image 2">
<img class="imgSlide-c" src="//placehold.it/200x200&text=Image 3">
</div> <!-- /slideGroup-one -->
<div class="slideGroup-two">
<img class="imgSlide-a" src="//placehold.it/200x200&text=Image 1">
<img class="imgSlide-b" src="//placehold.it/200x200&text=Image 2">
<img class="imgSlide-c" src="//placehold.it/200x200&text=Image 3">
</div> <!-- /slideGroup-two -->
</div> <!-- /js-imgFade -->
</div> <!-- /container -->
CSS:
* { margin: 0; padding: 0; }
.container {
margin: 0 auto;
max-width: 1000px;
}
[class*="imgSlide-"] {
background: #e1e1e1;
border: 1px dashed #ccc;
margin: 30px 0 0 10px;
padding: 10px;
}
[class*="imgSlide-"]:first-child {
margin-left: 0;
}