hover 메소드는 다음과 같습니다.
.hover( handlerIn(eventObject), handlerOut(eventObject) )Returns : jQuery
개요 : 마우스 포인터가 요소들에 올라오거나 떠날때 실행되는 두개의 핸들러를 바인딩합니다.
.hover( handlerIn(eventObject), handlerOut(eventObject) )
handlerIn(eventObject) 마우스 포인터가 요소에 들어올 때 실행될 기능
handlerOut(eventObject) 마우스 포인터가 요소에서 떠날 때 실행될 기능
animate 메소드를 사용하려면 position 스타일 속성이 absolute이거나 relative 여야합니다.
그점에 유의하여 hover 메소드와 animate 메소드를 사용하여 마우스를 갖다될 때 애니메이션 효과가 적용되는 것을 만들어 봅시다.
소스코드
<!DOCTYPE html>
<html>
<head>
<style>
div{
width: 50px; height: 50px;
background-color: orange;
position: relative;
}
</style>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(document).ready(function (){
//hover 메소드는
//마우스 포인터가 요소들에 올라오거나 떠날때 실행되는 두개의 핸들러를 바인딩합니다.
$('div').hover(function(){
$(this).animate({
left: 500
}, 'slow');
}, function(){
$(this).animate({
left: 0}, 'slow');
});//hover메소드 끝
});//ready메소드 끝
</script>
</head>
<body>
<div></div><div></div>
<div></div><div></div>
<div></div><div></div>
</body>
</html>
출력화면
마우스를 갖다대면 사각형이 움직이는 출력화면입니다.
출처 : 모던웹을 위한 javascript&jquery 입문
'프로그래밍 > Jquery' 카테고리의 다른 글
| jquery - delay 메소드를 이용한 애니메이션 지연 방법 (0) | 2014.11.02 |
|---|---|
| jquery - stop 메소드를 이용한 애니메이션 정지하기 (0) | 2014.10.27 |
| jquery - 애니메이션 큐 및 큐를 clear 하는 방법 (0) | 2014.10.27 |
| jquery - animate 메소드를 이용한 동적으로 스타일 변화시키기 (0) | 2014.10.27 |
| jquery - innerfade 플러그인을 이용한 사진 변경 효과 적용하기 (0) | 2014.10.27 |
| jquery - toggle 메소드를 이용한 시각효과 만들기 (0) | 2014.10.20 |
| jquery - 입력양식 이벤트를 이용한 한번에 모든 체크박스를 체크하기 (2) | 2014.10.18 |
| jquery - window객체를 활용하며 무한 스크롤 구현하기 (0) | 2014.10.18 |