成功使用 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();
});

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();
    });
});

成功使用 fadeIn() 和 fadeOut()

Using fadeIn() and fadeOut() successfully

javascript

css

jquery

fade