javascript - 成功使用fadeIn() 和fadeOut()

我有一个元素网格，其中一些是图像，一些是文本(全部垂直对齐，使用不同的 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();
});

A JSFiddle of my predicament can be found here 。

最佳答案

您应该在元素 .back 淡出后淡入元素 .front。

您可以通过在 .fadeIn() 回调中调用 .fadeOut() 来做到这一点:

Updated Example

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

关于javascript - 成功使用fadeIn() 和fadeOut()，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/29036365/