Geek Answers Handbook

Using fadeIn () and fadeOut () successfully

I have a grid of elements, some of which are images, and some are text (all vertically aligned using various CSS methods). Clicking on them hides the content with fadeOut()and displays other content with fadeIn().

My question has two parts:

How can I get initially hidden content out of alignment with the foreground CSS during the transition? The text will be misaligned until the transition is complete.

And secondly, how can I switch this switch so that the process can be canceled?

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

And my JavaScript / jQuery:

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

JSFiddle of my predicament can be found here .

+4
1

.back , .front .

, .fadeIn() .fadeOut():

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

More articles:


All Articles