How to hide/show the div using javascript with transition ease-in-out effect?

Question

This is my code which hide/show the div...but I want transition effect while hide/show in javascript like ease-in-out. How to achieve this in javascript?

function showHide(shID) {

    if (document.getElementById(shID)) {
        if (document.getElementById(shID + '-show').style.display != 'none') {
            document.getElementById(shID + '-show').style.display = 'none';
                document.getElementById(shID).style.display = 'block';
                window.scrollTo(0, 2346);
            }
        else {

            document.getElementById(shID + '-show').style.display = 'inline';
            document.getElementById(shID).style.display = 'none';

        }
    }
}

Answer 1

As has been pointed out, you should use CSS3 transitions if you want to do this in a standard way which will also not cause a lot of trouble because of high maintenance.

However, the problem then is you're trying to use a transition on a property with no quantifiable transitional values. There is no middle ground between display: block; and display: none; so you must use something which does have transitional values. Usually a property such as width or height is appropriate, but you can also use it on opacity , left , top , etc. (so basically any property with a numeric value).

This CSS is for an element which fades and slides in and out of a document from the top.

.panel {
    position: absolute;
    top: 0px;
    opacity: 0;
    -moz-transition: opacity .25s ease-in-out , top .25s ease-in-out;
    -o-transition: opacity .25s ease-in-out , top .25s ease-in-out;
    -webkit-transition: opacity .25s ease-in-out , top .25s ease-in-out;
    transition: opacity .25s ease-in-out , top .25s ease-in-out;
}
.panel.show {
    top: 50px;
    opacity: 100;
}

Here's a Javascript that goes through the elements, checks for a data-toggle attribute, and assigns a click handler if it finds it. The handler toggles the show class for the targeted element.

function toggleElem(evt) {
    var cn = 'show';
    var panel = document.getElementById(evt.target.getAttribute('data-toggle'));
    var classes = panel.className.split(/\s+/);
    var x = classes.indexOf(cn);

    if(x >= 0)
        { classes.splice(x,1); }
    else
        { classes.push(cn); }

    panel.className = classes.join(' ');
}

var elems = document.body.getElementsByTagName('*');

for(var i=0,l=elems.length;i<l;i++) {
    var elem = elems[i];
    var toggle = elem.getAttribute('data-toggle');

    if(toggle !== null)
        { elem.addEventListener('click',toggleElem,false); }
}

Example HTML.

<input type="button" data-toggle="foo" value="Toggle"/>
<div id="foo" class="panel">
    <p>This is a transitioned panel.</p>
</div>

Because of the fact you would be using opacity instead of display you may also run into the snag that the element you want to toggle, though invisible, will still be there as far as your cursor is concerned. You may then want to use setTimeout() to change the display value in addition to performing the class change to keep your transitioned element from catching input when hidden.

Answer 2

I am not sure, why you are not using CSS3 transitions.

But to keep it all strictly javascript probably this source code is helpful: https://github.com/jquery/jquery/blob/master/src/effects.js#L107