Успешное использование fadeIn() и fadeOut()

Question

У меня есть сетка элементов, некоторые из которых являются изображениями, а некоторые текстовыми (все выровнены по вертикали с использованием различных методов CSS). Нажатие на них скрывает содержимое с fadeOut()и показывает другой контент с fadeIn(),

Мой вопрос состоит из двух частей:

Как я могу получить изначально скрытый контент, чтобы он не соответствовал CSS фронта во время перехода? Текст не выровнен до завершения перехода.

И во-вторых, как я могу переключить этот переключатель, чтобы процесс можно было обратить вспять?

Мой CSS:

.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;
}

И мой JavaScript / JQuery до сих пор:

$(".outer").click(function() {
    $(this).find(".front").fadeOut();
    $(this).find(".back").fadeIn();
});

JSFiddle моего затруднительного положения можно найти здесь.

Answer 1

Вы должны исчезнуть стихия .back после элемента .front был исчез

Вы бы сделали это, вызвав .fadeIn() в пределах .fadeOut() Перезвоните:

Обновленный пример

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