jquery UI Effect 플러그인을 다운
http://jqueryui.com 에서 download에서 받을 수 있습니다.
기본적으로 addClass메소드로 애니메이션을 추가하고 removeClass메소드로 애니메이션을 삭제 할 수 있습니다.
이를 사용하기 위해서는
<link rel="stylesheet" href="./jquery-ui-1.11.2.custom/jquery-ui.css"/>
과
<script src="./jquery-ui-1.11.2.custom/jquery-ui.js"></script>
이부분을 추가해줘야 플러그인을 사용할 수 있습니다.
소스
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="./jquery-ui-1.11.2.custom/jquery-ui.css"/>
<style>
.reverse{
color: white;
background-color: black;
}
</style>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="./jquery-ui-1.11.2.custom/jquery-ui.js"></script>
<script>
$(document).ready(function(){
$('div').hover(function(){
$(this).addClass('reverse', 1000);
}, function(){
$(this).removeClass('reverse', 1000);
});
});
</script>
</head>
<body>
<div>
<h1>Lorem</h1>
<p>sit</p>
</div>
<div>
<h1>Lorem</h1>
<p>sit</p>
</div>
<div>
<h1>Lorem</h1>
<p>sit</p>
</div>
</body>
</html>
실행화면
마우스를 갖다대면 서서히 검은색 부분이 나타납니다.
'프로그래밍 > Jquery' 카테고리의 다른 글
| Jquery - Chrome Hack : Cross-Domain 문제를 피하는 법 (0) | 2014.12.29 |
|---|---|
| Jquery -$ajax 크로스 도메인 문제 해결 방법 (0) | 2014.12.29 |
| Jquery - $.ajax() 메서드의 옵션 (0) | 2014.12.28 |
| jquery - 슬라이더 효과를 사용한 이미지 전환 방법 (이미지슬라이더) (0) | 2014.12.21 |
| jquery - delay 메소드를 이용한 애니메이션 지연 방법 (0) | 2014.11.02 |
| jquery - stop 메소드를 이용한 애니메이션 정지하기 (0) | 2014.10.27 |
| jquery - 애니메이션 큐 및 큐를 clear 하는 방법 (0) | 2014.10.27 |
| jquery - animate 메소드를 이용한 동적으로 스타일 변화시키기 (0) | 2014.10.27 |