jQueryでクリックするとぶるんってする

テキストをぶるんってする

最初は普通のテキストです。

html

	<ul class="list01">
		<li>List 01</li>
		<li>List 02</li>
		<li>List 03</li>
		<li>List 04</li>
	</ul>
	

jQueryの部分。
animate をメソッドチェーンでこまかく繋げてけばぶるんって感じになります。

JavaScript

	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
    $(function() {
        $('.list01 li').click(function(){
            $(this)
                .animate({'marginLeft':'10px'}, 20)
                .animate({'marginLeft':'-8px'}, 20)
                .animate({'marginLeft':'6px'}, 20)
                .animate({'marginLeft':'-4px'}, 20)
                .animate({'marginLeft':'2px'}, 20)
                .animate({'marginLeft':'-0px'}, 20);
        });
    });
    </script>
	

CSS3でテキストをぶるんってする

CSS3っていってもクラスのON/OFFでJS使います。

JavaScript

	$(function() {
        var list = $('.list01');
        list.find('li').click(function(){
            list.children('li').removeClass('active');
            $(this).addClass('active');
        });
    });
	

アニメーション部分です。
-webkit-とかのベンダープレフィクスは省略してます。

css

	.list01 li.active {
		animation: buller 0.2s linear;
	}
	@keyframes buller {
		0%{margin-left: 10px;}
		20%{margin-left: -8px;}
		40%{margin-left: 6px;}
		60%{margin-left: -4px;}
		80%{margin-left: 2px;}
		100%{margin-left: 0px;}
	}
	

枠をぶるんってする

枠だけぶるんってしたいんですよね。
cssは下記のように設定します。
span 要素が枠になっています。
outline プロパティでいけそうな気がしますが、わかりませんでした。

css

	.list01 li {
		cursor: pointer;
		padding: 8px;
		position: relative;
		margin-bottom: 1px;
		list-style: none;
	}

	.list01 li span {
		position: absolute;
		border: solid 1px #8EC5E6;
		background-color: #E7F2FA;
		display: block;
		z-index: -1;
		width: 100%;
		left: 0;
		top: 0;
		border-radius: 3px;
	}
	

jQueryではクリックしたときにspanを追加して、さにほどと同じようにアニメーションを繋げてきます。

JavaScript

	$(function() {
        var list = $('.list01');
        list.find('li').click(function(){
            var listH = $(this).innerHeight();
            list.find('span').remove();
            $(this)
                .append('<span></span>')
                .find('span')
                    .height(listH)
                    .animate({'marginTop':'4px'}, 20)
                    .animate({'marginTop':'-4px'}, 20)
                    .animate({'marginTop':'2px'}, 20)
                    .animate({'marginTop':'-2px'}, 20)
                    .animate({'marginTop':'1px'}, 20)
                    .animate({'marginTop':'0px'}, 20);
        });
    });
	

css3で影もアニメーションしてやるとちょっとだけいい感じになります。

css

	.list01 li span {
            ・・・
            animation: buller 0.2s linear;
        }
        @keyframes buller {
            0%{box-shadow: 0px 3px 2px #afbed6, 0px -3px 2px #afbed6;}
            100%{box-shadow: 0px 0px 0px #afbed6, 0px 0px 0px #afbed6;}
        }