jQueryを使わないでスライド式の開閉表示

微変化の連続はsetTimeoutが万能

Demo

↓表示↓

 

表示の有無を行うDOMの概念がJavaScriptにあります。

基本的にファイルをjson化したりXML化する事により、それらのファイルを呼び出して本格的なAjax方針にする事ができますが。

基本的に開閉を行う場合ソースでは、表示させる部分に単独でdiv要素を起き、JavaScript上でデータを展開して表示させます(innerHTML)

 <script type="text/JavaScript">

        function open(){

                 document.getElementById("test").innerHTML = "ここに表示させるテキスト";

        } 

 </script> 


 <div id="test"></div>
 <div onClick="open()">続きを読む</div> 

基本で一般的な方法です。

しかしながらこの方法では、表示の有無だけの切り替えになるためエフェクト効果的な存在が全くありません。

jQueryのフェード式で表示するライブラリをよく見かけます(画像のフェード、スライド表示等)

今回はこの殺風景な表示にエフェクト効果をライブラリ無しでやっていこうと思います。

Sample1

 <style type="text/css">


</style>

<script type="text/JavaScript">

num_date = 0;
height = 0;

	function hiddenly(){

		if(num_date == 0){
			document.getElementById("ins").style.height = height + "px";
			height+=2;
			tell = setTimeout("hiddenly()",1);
			if(height == 200){
				document.getElementById("hidden").innerHTML = "↑表示↑";
				document.getElementById("ins").innerHTML = "フェードイン効果は<br>大体がjQueryで持つことが多いですが<br>setTimeoutとclearTimeoutを<br>駆使すれば、大抵の効果は可能となります<br>jQueryに頼ってばかりでなく、JavaScriptでかけるところはかいてしまいましょう<br>それが上達の路だと思います";
				stopper(1);
			}
		}

		else if(num_date == 1){
			document.getElementById("ins").style.height = height + "px";
			height-=2;
			tell = setTimeout("hiddenly()",1);
			if(height == -2){
				document.getElementById("hidden").innerHTML = "↓表示↓";
				document.getElementById("ins").innerHTML = "";
				stopper(0);
			}
		}


}

function stopper(change){

num_date = change;
clearTimeout(tell);

}

</script>


<div id="hidden" onClick="hiddenly()" style="color: #00F;border: 2px groove #333;background-color: #555;font-weight: bold;padding: 3px;">↓表示↓</div>
<div id="ins" style="background-color: #000;color: #FFF;font-weight: bold;"></div>

少々長くなりましたが、ソースはこのようになります。

setTimeoutの役割は、毎0.001秒ごとに2px heightの値を増加(減少)させるです。

そして予め定めておいた長さ(今回は-2pxと200pxです)

※0pxに設定するとこのソースでは真理値の問題で2px残されてしまうため-2に設定しています。

 

発想転換すると、これでheightをopacityなどの透明度にするとフェード効果をJavaScriptだけで実現できるという事になります。

フェード効果やスライドの表現は他の方法もあるようですが、全ての効果に対して期待できるのは、setTimeoutだけではないかと思います。

しかし問題上連続で関数を呼び出す結果となるため、負荷が生じメモリが足りていないパソコン等では動作が遅くなります。

setTimeoutの毎秒の組み合わせと、何pxずつ変動させるかの組み合わせの考えが難しい所です。