1

コンテンツ div と、最初の div の下に別の div があります。最初の div のコンテンツは動的に変化し、その高さは必要に応じて変化します。通常、最初の div の高さが変化すると、2 番目の div の位置が自動的に上下します。できれば CSS と JS (jQuery なし) のみを使用して、2 番目の div の動きをアニメーション化するにはどうすればよいですか?

ビジュアルは次のとおりです。 ここに画像の説明を入力

左側には、最初の 2 つの div があります。場合によっては、div1 の高さがコンテンツに合わせて拡張され、div2 が押し下げられます。div2 の動きをアニメートするにはどうすればよいですか?

4

2 に答える 2

2 
function init() {
    var header = document.getElementById('header');
    var header_height = header.offsetHeight;
    header.style.height = '10px';
    header.style.overflow = 'hidden';
    var i = 0;
    var animation = setInterval(function () {
        if (i <= header_height) {
            header.style.height = (10 + i) + 'px';
        } else {
            clearInterval(animation);
            header.style.overflow = 'block';
        }
        i++;
    }, 10); 
}

わかりました、多分いくつかのメモが必要ですか？移動する必要があるのは「2番目」のdivではなく、「最初」です。移動すると、2番目が自動的に下部（または最初の最後）にプッシュされます

于 2012-04-29T23:34:44.180 に答える
1

デモ: http://jsfiddle.net/xS3y7/

#div1 {
    width: 50px; // Parent div needs width and height for this to work.
    height: 50px;
    background-color : red;
    position: relative;
}

#div2 {
    position: absolute;  //positioning based on parent.
    width: 100%; // 100% width of parent
    height: 20%; // 20% width of parent
    background-color: blue;
    bottom: 0px; // Place on the bottom
}​

注意すべき重要なことは、親は絶対位置または相対<div>位置のいずれかを持つ必要があり、子は絶対位置を持つ必要があるということです。絶対配置は、最も近い親要素 (この場合は) に基づいて配置されます。絶対配置により、(親要素に対して) 必要な場所に要素を配置したり、値を計算したりできるため、これは非常に強力です。<div>#div1

詳しくは、Chris Coyier のCSS-Tricksをご覧ください。

于 2012-04-30T00:25:54.107 に答える