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。

您可以通过在.fadeIn()回调中调用.fadeOut()来执行此操作：

Updated Example

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

成功使用fadeIn（）和fadeOut（）

1 个答案: