フェードイン・フェードアウトの人力検索
http://q.hatena.ne.jp/1174039036
Objectではなくfunctionな書き方だったので、適当に自分なりに書いた。ロジックはフェードイン、アウトの部分だけ。
<html> <head> <script type="text/javascript"> var Fade = function(id) { this.element = document.getElementById(id); } Fade.FONT_CHARS = [ "#000", "#111", "#222", "#333", "#444", "#555", "#666", "#777", "#888", "#999", "#aaa", "#bbb", "#ccc", "#ddd", "#eee", "#fff" ]; Fade.ANIME_SPEED = 100; Fade.TYPE_IN = 0; Fade.TYPE_OUT = 1; Fade.prototype = { fadeIn: function() { this.type = Fade.TYPE_IN; this.nowPoint = Fade.FONT_CHARS.length; this.fading(); }, fadeOut: function(count) { this.type = Fade.TYPE_OUT; this.nowPoint = 0; this.fading(); }, fading: function() { if (this.type == Fade.TYPE_IN) { if (this.nowPoint < 0) return; this.nowPoint--; } else if (this.type == Fade.TYPE_OUT) { if (this.nowPoint > Fade.FONT_CHARS.length) return; this.nowPoint++; } this.element.style.color = Fade.FONT_CHARS[this.nowPoint]; var self = this; setTimeout(function(){self.fading.apply(self)}, Fade.ANIME_SPEED); } } window.onload = function() { var jkondo = new Fade("jkondo"); var jnaoya = new Fade("jnaoya"); jkondo.fadeIn(); jnaoya.fadeOut(); } </script> </head> <body> <div id="jkondo" style="color:#fff">jkondo</div> <div id="jnaoya" style="color:#000">jnaoya</div> </body> </html>
利用する機会はなさそうですが、どうぞご利用ください。