추억의 호빵아이콘, 간단한 애니메이션 활용 예제

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

	<script type="text/javascript">

		function animHobbang(o){
			var tmp = o;
			var timer = Math.round(Math.random() * 2000) + 500; // 에니메이션 시간 랜덤
			$(o).stop().animate({top:240}, timer, 'easeOutBounce', function(){$(tmp).stop().animate({top:0}, 1000, 'easeInBounce')});
		}

	</script>

호빵을 클릭해 보세요

	<div id="hobbang" style="height:300px; border:2px solid silver; text-align:center;">
		<img style="position:relative;" onclick="animHobbang(this)" src="http://biketago.com/img/etc/hobbang01.gif" />
		<img style="position:relative;" onclick="animHobbang(this)" src="http://biketago.com/img/etc/hobbang04.gif" />
		<img style="position:relative;" onclick="animHobbang(this)" src="http://biketago.com/img/etc/hobbang02.gif" />
		<img style="position:relative;" onclick="animHobbang(this)" src="http://biketago.com/img/etc/hobbang03.gif" />
		<img style="position:relative;" onclick="animHobbang(this)" src="http://biketago.com/img/etc/hobbang01.gif" />
		<img style="position:relative;" onclick="animHobbang(this)" src="http://biketago.com/img/etc/hobbang03.gif" />
		<img style="position:relative;" onclick="animHobbang(this)" src="http://biketago.com/img/etc/hobbang04.gif" />
		<img style="position:relative;" onclick="animHobbang(this)" src="http://biketago.com/img/etc/hobbang02.gif" />
		<img style="position:relative;" onclick="animHobbang(this)" src="http://biketago.com/img/etc/hobbang04.gif" />
		<img style="position:relative;" onclick="animHobbang(this)" src="http://biketago.com/img/etc/hobbang05.gif" />
	</div>