Using fadeIn() and fadeOut() successfully

I have a grid of items, some of which are images, and some are text (all vertically-aligned, using different CSS techniques). Clicking these hides the content with fadeOut(), and shows different content with fadeIn().

My question is two-part:

How can I get the initially-hidden content to not match the CSS of the front during the transition? The text is mis-aligned until the transition has finished.

And secondly, how can I toggle this switch so that the process can be reversed?


.outer {
  position: relative;
  width: 144px;
  height: 144px;
  float: left;
  border: solid 1px #dddddd;
  margin: 10px;
.inner {
  position: absolute;
  width: 100%;
  height: 100%;
  text-align: center;
.inner img {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  max-height: 124px;
  max-width: 124px;
  padding: 10px;
.inner p {
  font-weight: 700;
  font-size: 1.2em;
  position: relative;
  top: 50%;
  padding: 10px;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  transform: translateY(-50%);
.back {
  display: none;

And my JavaScript/jQuery so far:

$(".outer").click(function() {

A JSFiddle of my predicament can be found here.


You should fade the element .back in after the element .front has been faded out.

You would do this by invoking .fadeIn() within the .fadeOut() callback:

Updated Example

$(".outer").click(function () {
  var self = this;
  $(this).find(".front").fadeOut(function () {