一から勉強させてください( ̄ω ̄;)

最下級エンジニアが日々の学びをアウトプットしていくだけのブログです。

jQueryで簡単な拡大縮小アニメーションをつくってみた

今回は、簡単な拡大アニメーションをつくったときのことを書きたいと思います。


まず実際につくったサンプルはこちら↓
http://jsfiddle.net/danimal141/HhpFz/1/embedded/result/

ブラウザのウインドウを縮小していただくと、要素の配置が変わってまた乙な感じになります(と勝手に思っていますw)


で、コードはこちらになります。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <style type="text/css">    
.wrap{
    margin:50px;
}
.wrap::after{
    display:block;
    clear:both;
    content:"";
}
.wrap li{
    float:left;
    width:60px;
    height:100px;
    text-indent:100%;
    white-space:nowrap;
    overflow:hidden;
    margin:10px;
    cursor:pointer;
}
.wrap li:first-child{
    background-color:red;
}
.wrap li:nth-child(2){
    background-color:blue;
}
.wrap li:nth-child(3){
    background-color: yellow;
}
.wrap li:nth-child(4){
    background-color:green;
}
.wrap li:nth-child(5){
    background-color:purple;
}
.wrap li:nth-child(6){
    background-color:black;
}
  </style>
</head>
<body>
  <ul class="wrap">
    <li data-toggled="off">li要素</li>
    <li data-toggled="off">li要素</li>
    <li data-toggled="off">li要素</li>
    <li data-toggled="off">li要素</li>
    <li data-toggled="off">li要素</li>
    <li data-toggled="off">li要素</li>
  </ul>
  <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  <script>
  $(document).on("click","li:not(:animated)", function(){
        var $this = $(this);
  	if(!$this.attr("data-toggled") || $this.attr("data-toggled") == "off"){
		//change data-toggled, hide display
		$this.attr("data-toggled","on");
		$("li[data-toggled='off']").hide(500);
 
		$this.animate({
			width: $this.width() * 4,
			height: $this.height() * 4
		},500);
            
	}else if($this.attr("data-toggled") == "on"){
		$this.animate({
			width: $this.width() / 4,
			height: $this.height() / 4
		},500,function(){
			$this.attr("data-toggled", "off");
		});
 
		//show display
		$("li[data-toggled='off']").show(500);
	}
});
  </script>
</body>
</html>


まず、HTML,CSSのほうは、
リストを6こつくって、それぞれに色をつけてfloat:leftで配置しただけです。普通です。。


次にJSのほうですが、

前回の反省を生かし、一応$(document)に対してonメソッドでイベントを登録しています。(今回の場合は特に意味はないかもしれませんが…)

ここで今回、自分が勝手にポイントだと思っているのは、data-toggledという属性をliに追加して、その値をon,offと切り替えることによって、toggleメソッドっぽくイベント登録しているところ!!


こちら↓を参考にさせて頂きました。
http://stackoverflow.com/questions/10864353/on-toggle-working-together


で、全体の流れをざっと書くと、


毎回$(this)を用意するのはパフォーマンス上良くないので、$(this)を変数$thisに格納しておく。(ちゃんと高速化とかも意識できるようにならないと!!)

クリックしたli要素のみ、data-toggledをonに切り替え、それ以外のli要素をいったん非表示にする。
                ↓
クリックした要素のwidth,heightをanimateで拡大する
                ↓
もう一度クリックすると、width,heightをまたanimateで元の値に戻し、さらにdata-toggledもoffに戻す。
                ↓
非表示にしていた他のli要素を元に戻す。


こんな感じです。


以上、平凡なサンプルですが、最下級エンジニアの自分としてはこんなサンプルでも完成したらとても嬉しいものなのです。


とりあえず作る!!僕はこれが大事だと思っています。
だって作らないと、失敗もできないし、失敗しないと学べないし。

まあこんな感じでどんなしょぼいものでも、とにかく作って公開して失敗して学んで、、そうやって成長していきたいです。

小さなことからコツコツと。