간단한 애니메이션 + 셀렉터 예제, 동물농장(?)

<script type="text/javascript" src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>

<style type="text/css">

	#zoo { width:600px; margin:0 auto; }
	#zoo div { text-align:center; width:120px; height:120px; float:left; }
	#zoo div img { position:relative; }
	.btn_div { text-align:center; }
	.btn_div input { width:200px; margin-bottom:5px; padding:5px; }

</style>

<script type="text/javascript">

	function anim(j){
		j.animate({width:'+=50', left:'-=10', top:'-=25'}, 300, 'easeOutBounce').animate({width:'-=50', left:'+=10', top:'+=25'}, 300, 'easeInBounce');
	}

	function anim2(j){
		j.animate({width:'+=500', left:'-=250'}, 1000, 'easeOutBounce').animate({width:'-=500', left:'+=250'}, 1000);
	}

</script>

<div style="text-align:center; font-weight:bold; font-size:12pt; margin-bottom:20px;">대략 썰렁한 동물농장</div>

<div id="zoo">
	<div>
		<img src="http://biketago.com/img/etc/animal01.gif" />
	</div>
	<div>
		<img src="http://biketago.com/img/etc/animal02.gif" />
	</div>
	<div>
		<img src="http://biketago.com/img/etc/animal03.gif" />
	</div>
	<div>
		<img src="http://biketago.com/img/etc/animal04.gif" />
	</div>
	<div>
		<img src="http://biketago.com/img/etc/animal05.gif" />
	</div>
</div>

<div style="clear:both;"></div>
<br>

<div class="btn_div">
	<input type="button" value="#zoo div:first-child img" onclick="anim($('#zoo div:first-child img'))"><br>
	<input type="button" value="#zoo div:last-child img" onclick="anim($('#zoo div:last-child img'))"><br>
	<input type="button" value="#zoo div:nth-child(3) img" onclick="anim($('#zoo div:nth-child(3) img'))"><br>
	<input type="button" value="#zoo div:nth-child(odd) img" onclick="anim($('#zoo div:nth-child(odd) img'))"><br>
	<input type="button" value="#zoo div:nth-child(even) img" onclick="anim($('#zoo div:nth-child(even) img'))"><br>
	<input type="button" value="#zoo div img" onclick="anim($('#zoo div img'))"><br>
	<input type="button" value="깜놀" onclick="anim2($('#zoo div img'))"><br>
</div>