0

このフィドルを参照してください - http://jsfiddle.net/grimmus/vawE9/4/

<div class="refresh">
        <div class="date" id="date">
            As of 1/10/2013 16:44 2013 (GMT + 1)
        </div>
        <div class="loading"id="loading">
            Loading...
        </div>
</div>

青いボックスで、日付と読み込み中のテキストを切り替えようとしています。日付のテキストはさまざまな幅にすることができます。テキストが非表示で読み込み中のテキストが表示されているときに、この幅を同じままにしたいと思います。日付の幅は、必要なだけ左に拡張する必要があります。ローディングテキストは常に左揃えにする必要があります

読み込み中のテキストを表示するときに、ボックスの幅を維持するのに苦労しています。私が考えた解決策の 1 つは、日付テキストに非表示の可視性を適用してから、読み込み中のテキストをこの div の上に相対的に配置し、z-index を高くすることでした。非常に複雑に思えますが、もっと簡単な解決策があることを願っています。

提案/アドバイス/ヒントは大歓迎です。

ps は ie7+ で動作する必要があります

4

1 に答える 1

0

このjsFiddleの例を試してください:

jQuery

setInterval(function () {
    $('#date').animate({
        opacity: .01
    }, 0, function () {
        $('#loading').fadeIn(0).delay(2000).fadeOut(0, function () {
            $('#date').animate({
                opacity: 1
            }, 0)
        });
    })
}, 4000);

CSS

body {
    margin:25px;
}
.container {
    background:#ccc;
    height:50px;
    width:100%;
}
.refresh {
    background:blue;
    color:#ccc;
    height:20px;
    float:right;
    margin-right:25px;
    min-width:150px;
    text-align:left;
    position:relative;
}
.date {
    position:relative;
}
.loading {
    display:none;
    position:absolute;
    top:0px;
}
于 2013-04-25T15:50:34.463 に答える