成功使用fadeIn（）和fadeOut（）

Question

我有一個網格的項目，其中一些是圖像，一些是文本（所有垂直對齊，使用不同的CSS技術）。點擊這些隱藏的內容與​​，並顯示與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(); 
}); 

A JSFiddle of my predicament can be found here。

Answer 1

您應該在之後褪色元素.back元素.front已淡出。

你會被.fadeOut()回調中調用.fadeIn()做到這一點：

Updated Example

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