So I needed a simple fadeIn gallery for one of the sites and it seemed like 5k that Innerfade sports would be a perfectly elegant solution for a simple task.

Everything worked perfectly and I love the way the setup works, very easy, very intuitive, but there was one little problem. When I loaded the page for a short time (before document gets fully loaded) I would have all 5 images (I had 5 images) display in stack vertically. And since these images were in a header it looked very unprofessional.

Here is how I tackled the problem:

1) I used .innerfade as a class name (default)
2) I added a new CSS class “.hidden” with {display: none;} in it.
3) My first image looks like this: <img src=”images/slides/img1.jpg” class=”innerfade” />
4) All consequent images look like this: <img src=”images/slides/img2.jpg” class=”innerfade hidden” />
5) After I initialize innerfade instance I did $(“.innerfade”).removeClass(“hidden”); so when its time for next slide it’s not hidden anymore

Problem solved