Javascript slide element

Question

I want to know what's the best technique to slide an element just like in these examples:

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

But with Pure Javascript so NOT jQuery or any library.

Example structure

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

So if I click on id=bridge the id=content will slide up and sets it's display to none and If I click on it again then sets it's display to block and slides down;

Solution 1

The sliding animation itself, like all animation in javascript, is done using timer functions: setTimeout or setInterval. For simple effects like this I always prefer setTimeout since it's easier to end the animation sequence compared to setInterval. How it works is to change CSS attribute values using 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);
    }
}

That's essentially the basics of animation in javascript. The idea is very simple. You can use any CSS style attribute for animation: top and left for absolutely or relatively positioned elements, margins like my example, width, height, transparency etc.

Now, as for what to use in your specific case depends on exactly what your intentions are. For example, the simplest thing to do what you describe would be to change the div height until it becomes zero. Something like:

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

But that's not how the example jQuery plugin does it. It looke like it moves the element by shifting its top and left style attribute and hides content off screen by using a container div with overflow:hidden.

Solution 2

My solution uses a css transition:

<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>

Comments

[cchamberlain]

This is the better current solution.