脱jQuery .animate() .stop()

.animate()

jQuery

$("#main").animate({
    opacity: 0.5,
    height: "300px",
    width: "+=50"
    }, 400
});

書き換え JavaScript

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

.animate() の書き換えは万能な形で簡単に書き換えるのは困難なので、仕組みを説明してみます。

JavaScript のアニメーション関係の拡張も結構あるので、それを使ってもいい思うのですが、根本的な仕組みは前回紹介した .fadeIn() や .slideUp() などと変わりません。

animation で最も大事な値は上記コードの下の方にある「current / myTime」です。この値が、一定時間（上記コードでは400ミリ秒、0.4秒）の間に0から1に変化します。

myMain.style.opacity = 0.5 * (current / myTime)

myMain.style.height = 600 - 300 * (current / myTime) + "px";

myMain.style.height = 300 + 50 * (current / myTime) + "px"; 

jQuery のアニメーションは様々な形で書くことができるので、万能に対応するのは難しいのですが、「初期値」と「最終値」がわかっていれば、値を増やす方にも減らす方にも記述することが出来ます。

「current / myTime」が0から1に変化すること。これさえ押さえていれば色々応用をきかせて変化をさせることが出来ます。width や height を変化させる場合は、単位が必要なのでその点は注意しましょう。jQuery はあっても無くても補完してくれますがネイティブではなかなか補完までは大変です。

これが ネイティブ JavaScript の animation の基本です。これを応用することで回転運動なども出来る様になります。

.stop()

jquery

$("#main").animate({
    opacity: 0.5,
    height: "300px",
    width: "+=50"
    }, 400
});
    
$("#main").stop();

書き換え JavaScript

var begin = new Date() - 0;
var myMain = document.getElementById("main");
var myTime = 400;
var id = setInterval(function() {
    var current = new Date() - begin;
    if (current > myTime) {
        clearInterval(id);
        current = myTime;
    }
    myMain.style.opacity = 0.5 * (current / myTime);
    myMain.style.height = 600 - 300 * (current / myTime) + "px";
    myMain.style.height = 300 + 50 * (current / myTime) + "px";
}, 10);
    
cleaInterval(id);

アニメーションは上記コードで言うと 「id」の変数の関数が動かしています。このコードでは id という名前になっていますが、単なる変数なので名前は何でも構いません。

それを止める命令が cleaInterval() となります。id を止めたければ、この中に id をいれればOKです。

通常はクリックしたら止まるとかそういう形だと思うので、.on() の書き換えと複合して使う形になるのが基本です。

参考：.on() の書き換え

ボタンを押したら止まる例

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

//#buttonを押すとアニメーションが止まる
document.getElementById("button").addEventListener("click", function() {
    cleaInterval(id);
}, false);

アニメーション関係に関しては「簡単に書き換える」を全然出来ませんが、こういう形でアニメーションしてるということがわかっていただければ嬉しいです。