css에서 다룰 수 있는 애니메이션 효과들을 jq에서 다뤄보자.
animate() : 지정한 스타일로 서서히 변함
show() : 보이기
hide() : 숨기기
toggle() : 보이거나 숨기기
animate
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script
src="http://code.jquery.com/color/jquery.color-2.1.2.js"
integrity="sha256-1Cn7TdfHiMcEbTuku97ZRSGt2b3SvZftEIn68UMgHC8="
crossorigin="anonymous"></script>
<style type="text/css">
.test1{
width: 200px;
height: 200px;
background: orangered;
}
</style>
</head>
<body>
<h1>Effect메소드</h1>
<p>페이지에 애니메이션 효과를 만들기 위한 메소드 집합</p>
<h3>animate() 메소드</h3>
<div id="test1" class="test1"></div>
<button id="btn">animation 적용</button>
<script type="text/javascript">
$(function() {
$("#btn").click(function() {
// 적용될 애니메이션, 실행 시간, 끝나고 실행될 함수
// 하지만 기본적으로 backgroundColor는 컨트롤 못하게 해놓았다.
$("#test1").animate({width:"500px", backgroundColor:"blue"}, 3000, function() {
alert("애니메이션 적용 완료")
});
// 배경 색을 바꾸려면 jquery 홈페이지에서 플러그인을 받아서 적용해야 한다.
});
});
</script>
</body>
</html>
배경색의 경우는 jquery 파일을 하나 더 추가해야 한다.
jquery 홈페이지에서 plug in 메뉴를 누르고
리스트 중 animation의 페이지 두번째 (바뀔 수 있다) jquery color를 선택해서
Download 버튼을 누르면 다음과 같은 페이지가 뜬다.
버전에 맞는 링크를 누르면 script가 나오는데 복사해서 코드 상단에 붙여넣으면 된다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style type="text/css">
div{
width: 50px;
height: 50px;
background: orangered;
position: relative;
}
</style>
<script type="text/javascript">
// Position은 대개 relative나 absolute 두 개를 자주 사용하는데
// relative는 자기 부모 객체를 기준으로 삼는 것이고
// absolute는 현재 페이지 자체를 기준으로 위치를 설정하게 된다.
</script>
</head>
<body>
<h1>상대적 애니메이션</h1>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<script type="text/javascript">
$(function() {
$("div").click(function() {
var width = $(this).css("width");
var height = $(this).css("height");
$(this).animate({
width:parseInt(width) + 50,
height:parseInt(height) + 50
}, "slow");
});
$("div").each(function(index) {
$(this).delay(index * 50).animate({left:500}, "slow");
});
});
</script>
</body>
</html>
show, hide, toggle
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<h1>시각적 효과</h1>
<h3>show()와 hide()</h3>
<p>문서 객체를 크게 하며 보여주거나 작게하며 사라지게 한다.</p>
<button id="show">보여주기</button>
<button id="hide">숨기기</button>
<img id="river" src="../image/river1.PNG">
<hr>
<script type="text/javascript">
$(function() {
$("#show").click(function() {
$("#river").show();
});
$("#hide").click(function() {
$("#river").hide();
});
});
</script>
<br>
<button id="toggle">토글하기</button>
<br>
<img id="forest" src="../image/forest1.PNG">
<script type="text/javascript">
$(function() {
/* var ctn = 0;
$("#toggle").click(function() {
ctn++;
if (ctn % 2 != 0) {
$("#forest").hide();
}else {
$("#forest").show();
}
}); */
// 따로 메소드가 또 있다.
$("#toggle").click(function(){
$("#forest").toggle(3000, function(){
alert("토글완료");
});
});
});
</script>
</body>
</html>