脱jQuery .fadeIn() .fadeOut() .slideUp() .slideDown()

.fadeIn()

jQuery

$("#main").fadeIn(600)

書き換え JavaScript

var begin = new Date() - 0;
var myMain = document.getElementById("main");
var myTime = 600;
var id = setInterval(function() {
    var current = new Date() - begin;
    if (current > myTime){
        clearInterval(id);
        current = myTime;
    }
    myMain.style.opacity = current / myTime;
}, 10);

初期状態が CSS などで、「opadcity: 0」と設定してある必要があります。アニメーションの基本は「指定時刻まで値を徐々に変化させていく」です。詳しい話は割愛しますが（知りたい方は上記 URL の中をご覧ください）、600ミリ秒までopacityを0から1まで変化させています。

myMain には変化させたい要素、myTime には変化させたい時間を入れます。ミリ秒単位なので1秒なら1000、3秒なら3000です。

このアニメーションでは動きに効果を出す（ ease-in など）は出来ません。 linear な動きだけになるので注意してください。

.fadeOut()

jQuery

$("#main").fadeOut(600)

書き換え JavaScript

var begin = new Date() - 0;
var myMain = document.getElementById("main");
var myTime = 600;
var id = setInterval(function() {
    var current = new Date() - begin;
    if (current > myTime) {
        clearInterval(id);
        current = myTime;
        myMain.style.display = "none";
    }
    myMain.style.opacity = 1 - (current / myTime) ;
}, 10);

fadeOut は opacity を 1から0に徐々に変化させ、消えてなくなった時に display を none にするという操作をします。 if (current > myTime){　} のカッコ内が600ミリ秒に達した時に実行するものになりますので、カッコ内に display = "none" を入れることで消すことが出来ます。

myMain には要素を、myTime には変化時間をミリ秒で入れます。

.slideUp()

jQuery

$("#main").slideUp(10000)

書き換え JavaScript

var begin = new Date() - 0;
var myMain = document.getElementById("main");
var myPaddingTop = parseFloat(document.defaultView.getComputedStyle(myMain, null).paddingTop);
var myPaddingBottom = parseFloat(document.defaultView.getComputedStyle(myMain, null).paddingBottom);
var myMarginTop = parseFloat(document.defaultView.getComputedStyle(myMain, null).marginTop);
var myMarginBottom = parseFloat(document.defaultView.getComputedStyle(myMain, null).marginBottom);
var myHeight = myMain.clientHeight - myPaddingTop - myPaddingBottom;
myMain.style.overflow = "hidden";
var myTime = 10000;
var id = setInterval(function() {
    var current = new Date() - begin;
    if (current > myTime) {
        clearInterval(id);
        current = myTime;
        myMain.style.display = "none";
    }
    myMain.style.height = myHeight * (1 - (current / myTime)) + "px";
    myMain.style.paddingTop = myPaddingTop * (1 - (current / myTime)) + "px";
    myMain.style.paddingBottom = myPaddingBottom * (1 - (current / myTime)) + "px";
    myMain.style.marginTop = myMarginTop * (1 - (current / myTime)) + "px";
    myMain.style.marginBottom = myMarginBottom * (1 - (current / myTime)) + "px";
}, 10);

かなり長いです。

slideUp で jQuery がやっていることは、最初に overflow を hidden にし、height 値を0に、padding 値を0に、margin 値を0に近づけていき、最終的に display を none することです。

それをネイティブで書くと上記のような形になります。jQuery の方はもう少し万能なのでこのネイティブの形だとバグが出たり、jQuery は細かい部分まで見るので異なる動きをするものもあるかもしれませんが、おおかたこのような形で jQuery 自体も動いています。

最初に height、padding（上下）、margin（上下）を取得し、それを時間までに徐々に0に近づけていくものとなります。

padding 値、margin 値は .css() と同じやり方で、height 値に関しては前回紹介した clientHeight から padding（上下）を引くことで出しています。

参考：height() の高さ取得の書き換え

.slideDown()

jQuery

$("#main").slideDown(1000)

書き換え JavaScript

var begin = new Date() - 0;
var myMain = document.getElementById("main");
var myTime = 1000;
var id = setInterval(function() {
    var current = new Date() - begin;
    if (current > myTime) {
        clearInterval(id);
        current = myTime;
    }
    myMain.style.height = 800 * (current / myTime) + "px"; //height を800に
    myMain.style.paddingTop = 20 * (current / myTime) + "px"; //padding-top を20に
    myMain.style.paddingBottom = 10 * (current / myTime) + "px"; //padding-bottom を10に
    myMain.style.marginTop = 5 * (current / myTime) + "px"; //margin-top を5に
    myMain.style.marginBottom = 3 * (current / myTime) + "px"; //margin-bottom を3に
}, 10);

slideDown に関しては jQuery ほど万能にするのは難しいです。

コードのラスト5行に書きましたが、この値は自分で決めていれることになります。ここだけ手動です。最終的になってほしい値を自分で入れます。

この操作を自動化する場合、さらにまたやらなくてはいけない操作が増えますので、説明が難しいため割愛します。値保存をしなくてはいけなくて面倒くさいです！

徐々に高さを 800px に近づけ、margin、paddingも決めた値に近づけます。

このコードに関しては CSS で初期状態が display:block になっていて、かつ height padding margin の各値が 0 に設定されている必要があります。jQuery はそのへんも吸収して勝手にやってくれます。