2

これらの例のように、要素をスライドさせるための最良のテクニックは何かを知りたいです:

http://demos.flesler.com/jquery/localScroll/#section1c

しかし、Pure JavascriptそうNOT jQueryかどんなライブラリでも。

構造例

<div id="holder">
    <div id="bridge" onclick="slide('content')">Click to slide</div>
    <div id="content" style="display:block;">The content</div>
</div>

したがって、意志をクリックしid=bridgeてid=contentにslide up設定するとdisplay、noneもう一度クリックすると、に設定さdisplayれblockますslides down。

4

2 に答える 2

2

スライドアニメーション自体は、javascriptのすべてのアニメーションと同様に、タイマー関数setTimeoutまたはを使用して実行されsetIntervalます。このような単純な効果の場合setTimeout、アニメーションシーケンスを終了する方がに比べて簡単なので、私は常に好みsetIntervalます。仕組みは、以下を使用してCSS属性値を変更することですsetTimeout。

// move the content div down 200 pixels:

var content = document.getElementById('content');

function moveDown () {
    var top = parseInt(content.style.marginTop); // get the top margin
                                                 // we'll be using this to
                                                 // push the div down

    if (!top) {
        top = 0; // if the margin is undefined, default it to zero
    }

    top += 20; // add 20 pixels to the current margin

    content.style.marginTop = top + 'px'; // push div down

    if (top < 200) {
        // If it's not yet 200 pixels then call this function
        // again in another 100 milliseconds (100 ms gives us
        // roughly 10 fps which should be good enough):
        setTimeout(moveDown,100);
    }
}

これが基本的にJavaScriptのアニメーションの基本です。アイデアはとてもシンプルです。アニメーションには任意のCSSスタイル属性を使用できます。絶対的または相対的に配置された要素の上下、私の例のような余白、幅、高さ、透明度などです。

さて、あなたの特定の場合に何を使うかは、あなたの意図が正確に何であるかに依存します。たとえば、説明する最も簡単な方法は、divの高さがゼロになるまで変更することです。何かのようなもの：

function collapseContent () {
    var height = parseInt(content.style.height);

    if (!height) {
        height = content.offsetHeight; // if height attribute is undefined then
                                       // use the actual height of the div
    }

    height -= 10; // reduce height 10 pixels at a time

    if (height < 0) height = 0;

    content.style.height = height + 'px';

    if (height > 0) {
        // keep doing this until height is zero:
        setTimeout(collapseContent,100);
    }
}

しかし、それはサンプルのjQueryプラグインが行う方法ではありません。上下のスタイル属性をシフトすることで要素を移動し、コンテナdivを使用してコンテンツを画面外に非表示にするように見えますoverflow:hidden。

于 2010-08-31T08:16:27.207 に答える
1

私のソリューションでは、CSS トランジションを使用します。

<style type="text/css">
    #slider {
        box-sizing: border-box;
        transition: height 1s ease;
        overflow: hidden;
    }
</style>

<div id="slider" style="height: 0">
    line 1<br>
    line 2<br>
    line 3
</div>

<script>
    function slideDown(){
        var ele = document.getElementById('slider');
        ele.style.height = "3.3em";

        // avoid scrollbar during slide down
        setTimeout( function(){
            ele.style.overflow = "auto";
        }.bind(ele), 1000 );                        // according to height animation
    }

    function slideUp(){
        var ele = document.getElementById('slider');
        ele.style.overflow = "hidden";
        ele.style.height   = "0";
    }
</script>
于 2015-10-28T16:54:38.153 に答える