Test case for jQuery Ticket 8301

fadeOut/in display: table-cell

by jitter

HTML

<div class="content-body">
    <div class="content-row">
        <div class="content-spacer-l">R1 C1</div>
        <div class="content-title">R1 C2</div>
        <div class="content-spacer-r">R1 C3</div>
    </div>
    <div class="content-row">
        <div class="content-spacer-l">&nbsp;</div>
        <div class="content-bg content-nav"></div>
        <div class="content-spacer-r">&nbsp;</div>
    </div>
    <div class="content-row" style="height:15px;"></div>
    <div class="content-row">
        <div class="content-spacer-l"></div>
        <div class="content-cell" id="content-main">
            <button onClick="example();">Click me</button>
        </div>
        <div class="content-spacer-r"></div>
    </div>
</div>

CSS

.content-body { display: table; }
.content-row { display: table-row; }
.content-cell { display: table-cell; }
.content-spacer-l { display: table-cell; width: 15px; background-color: #000; }
.content-spacer-r { display: table-cell; width: 125px; background-color: #000; }

.hidden { display: none; }

JavaScript

function example() {
    $("#content-main").fadeOut(400).append("Hi").fadeIn(400);

    // btw did you mean to do this (appending when first animation is done)
    /*
    $("#content-main").fadeOut(400, function() {
        $(this).append("Hi");
    }).fadeIn(400);
    */
}