elemento deslizante javascript

Question

Quiero saber cuál es la mejor técnica para deslizar un elemento al igual que en los ejemplos siguientes:

  

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

Pero con Pure Javascript por lo NOT jQuery o cualquier biblioteca.

Ejemplo estructura

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

Así que si hago clic en el id=bridge id=content se slide up y lo pone de display a none y si hago clic en él de nuevo y se establece de display a block y slides down;

Answer 1

La animación de deslizamiento en sí, al igual que todas las animaciones en javascript, se realiza mediante funciones de temporizador: setTimeout o setInterval. Para efectos simples como esto siempre prefiero setTimeout ya que es más fácil de poner fin a la secuencia de animación en comparación con setInterval. El funcionamiento es a cambio de valores de atributos CSS utilizando 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);
    }
}

Eso es en esencia los conceptos básicos de la animación en javascript. La idea es muy simple. Se puede utilizar cualquier atributo de estilo CSS para la animación:. Superior e izquierda para los elementos con posición absoluta o relativamente, como márgenes mi ejemplo, anchura, altura, transparencia, etc.

Ahora, en cuanto a lo que debe utilizar en su caso concreto depende de exactamente cuáles son sus intenciones. Por ejemplo, lo más sencillo hacer lo que describes sería cambiar la altura div hasta que se convierte en cero. Algo así como:

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

Pero no es así como el plugin jQuery ejemplo lo hace. Se looke como se mueve el elemento desplazando su parte superior izquierda y el estilo de atributos y contenidos cueros fuera de la pantalla mediante el uso de un div contenedor con overflow:hidden.

Answer 2

Mi solución utiliza una transición 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>