피사의 사탑에서 돌 낙하, 제이쿼리 애니메이션 효과 보기

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

	<script type="text/javascript">

		function animHobbang(v){
			$('#ball').stop().css({top:-570}).animate({top:10}, 1000, v);
		}

	</script>

	<style type="text/css">

		.wrap_btn { text-align:center; }
		.wrap_btn span { display:inline-block; font-size:9pt; padding:3px; margin:2px 0; border:2px solid silver; cursor:pointer; }

	</style>

	<div style="position:absolute;">
		<img id="ball2" style="width:1px;" src="http://biketago.com/img/etc/hobbang06.gif" />
	</div>
	<div id="hobbang" style="height:660px; border:2px solid silver; text-align:center;">
		<img src="http://biketago.com/img/etc/pisa.gif" />
		<img id="ball" style="position:relative; left:-150px; top:-570px; width:80px;" src="http://biketago.com/img/etc/hobbang06.gif" />
	</div>

	<br>

	<div class="wrap_btn">
		<span onclick="animHobbang('linear')">linear</span>
		<span onclick="animHobbang('swing')">swing</span>
		<span onclick="animHobbang('easeInQuad')">easeInQuad</span>
		<span onclick="animHobbang('easeOutQuad')">easeOutQuad</span>
		<span onclick="animHobbang('easeInOutQuad')">easeInOutQuad</span>
		<span onclick="animHobbang('easeInCubic')">easeInCubic</span>
		<span onclick="animHobbang('easeOutCubic')">easeOutCubic</span>
		<span onclick="animHobbang('easeInOutCubic')">easeInOutCubic</span>
		<span onclick="animHobbang('easeInQuart')">easeInQuart</span>
		<span onclick="animHobbang('easeOutQuart')">easeOutQuart</span>
		<span onclick="animHobbang('easeInOutQuart')">easeInOutQuart</span>
		<span onclick="animHobbang('easeInQuint')">easeInQuint</span>
		<span onclick="animHobbang('easeOutQuint')">easeOutQuint</span>
		<span onclick="animHobbang('easeInOutQuint')">easeInOutQuint</span>
		<span onclick="animHobbang('easeInSine')">easeInSine</span>
		<span onclick="animHobbang('easeOutSine')">easeOutSine</span>
		<span onclick="animHobbang('easeInOutSine')">easeInOutSine</span>
		<span onclick="animHobbang('easeInExpo')">easeInExpo</span>
		<span onclick="animHobbang('easeOutExpo')">easeOutExpo</span>
		<span onclick="animHobbang('easeInOutExpo')">easeInOutExpo</span>
		<span onclick="animHobbang('easeInCirc')">easeInCirc</span>
		<span onclick="animHobbang('easeOutCirc')">easeOutCirc</span>
		<span onclick="animHobbang('easeInOutCirc')">easeInOutCirc</span>
		<span onclick="animHobbang('easeInElastic')">easeInElastic</span>
		<span onclick="animHobbang('easeOutElastic')">easeOutElastic</span>
		<span onclick="animHobbang('easeInOutElastic')">easeInOutElastic</span>
		<span onclick="animHobbang('easeInBack')">easeInBack</span>
		<span onclick="animHobbang('easeOutBack')">easeOutBack</span>
		<span onclick="animHobbang('easeInOutBack')">easeInOutBack</span>
		<span onclick="animHobbang('easeInBounce')">easeInBounce</span>
		<span onclick="animHobbang('easeOutBounce')">easeOutBounce</span>
		<span onclick="animHobbang('easeInOutBounce')">easeInOutBounce</span>
		<span onclick="$('#ball2').stop().animate({width:'+=1000'}).animate({width:'-=1000'})">깜놀</span>
	</div>