[Jquery] 이미지 떨림효과 주기

마우스 올렸을때 이미지가 떨리는것처럼 보이는 효과 입니다.

 

 

<div class="icon">
	<img id="img_iphone" src="/image/iphone.png" alt="아이폰" />
</div>

이미지를 icon 클래스의 div로 감싸주었습니다.

 

 

스크립트

<script type="text/javascript">
iphone_Init();

function iphone_Init() {
	$(".icon").hover(
		function () {
			iphone_shake();
		},
		function () {
			$(this).stop();
		}
	);
}

function iphone_shake() {
	$(".icon").animate({ left: "3px" }, 50, "", function () {
		$(this).animate({ left: "0px" }, 50, "", function () { 
		iphone_shake(); });
	});
}
</script>

하단 </body> 쪽에 스크립트 넣어줍니다.