javascript - jqueryのようなJavascriptの表示/非表示

Question

jQueryのように表示/非表示を行うには、javascriptの純粋なコードが必要です。私はこのコードを使用します：

y=document.getElementById('regform').style.display;

if (y == 'block'){
    document.getElementById('regform').style.display='none';
}
else {
    document.getElementById('regform').style.display='block';
}

しかし、これは非常に高速に行われるため、jQuery で可能なように効果を遅くする必要があります。何か助けはありますか？

Answer 1

JS と CSS3 のトランジションを組み合わせることで実現できます。

http://jsfiddle.net/hQLQQ/1/

CSS:

#regform {
    -webkit-transition:opacity 300ms;
    -moz-transition:opacity 300ms;
    -o-transition:opacity 300ms;
    -ms-transition:opacity 300ms;
}

JS:

var toggle = function(elm){
    // check if style property is defined, then read .display, or assume it's "block"
    var y=elm.style ? elm.style.display : '';
    if (!y || y == 'block'){
        // change the opacity. CSS will handle the animation.
        elm.style.opacity='0';
        // change the display to "none" after a delay.
        setTimeout( function(){ elm.style.display = 'none'; }, 300 );
    }
    else {
        // change diplay to block. the element is still transparent.
        elm.style.display='block';
        // set the opacity to 1, CSS will animate it.
        // small delay because some browsers won't properly 
        // animate when changing "display" at the same moment.
        setTimeout( function(){ elm.style.opacity = '1'; }, 10 );
    }
}