jQuery 애니메이션 메소드
$("요소 선택").hide(); // 요소 숨김(hide: 숨기다)
$("요소 선택").show(); // 요소 출력(show: 보여지다)
$("요소 선택").toggle(); // 위 두 효과 적용
$("요소 선택").fadeOut(); // 요소가 점점 투명해지면서 사라짐
$("요소 선택").fadeIn(); // 요소가 점점 선명해지면서 나타잠
$("요소 선택").fadeToggle(); // 위 두 효과 적용
$("요소 선택").slideUp(); // 요소 위로 슬라이드
$("요소 선택").slideDown(); // 요소 아래로 슬라이드
$("요소 선택").slideToggle(); // 위 두 효과 적용
$("요소 선택").animate({스타일 속성}, 적용 시간, 가속도, 콜백 함수);스타일 속성: CSS처럼 똑같이 꾸며주시면 됩니다.
적용 시간: 애니메이션이 동작하는 데의 시간입니다. 1초를 지정해주고 싶으면 1000이란 숫자를 입력해 주시면 됩니다.
가속도: CSS transtion처럼, ease, linear 등의 속도 함수를 입력해 주시면 됩니다.
콜백 함수: 애니메이션 동작이 끝났을 때 실행 시키고 싶은 함수를 입력해 주시면 됩니다.
애니메이션 메소드 활용
이 애니메이션 메소드를 활용해서 무엇을 만들 수 있을까요? 우선 제 레벨에선 다양한 걸 구현하지 못하겠지만, 기존에 배웠던 버튼을 눌렀을 시 동작하게 하는 것 정도는 충분히 가능할 것 같았습니다.
<body>
<p><button class="btn1">버튼 1</button></p>
<span class="txt1">500px 이동</span>
<p><button class="btn2">버튼 2</button></p>
<span class="txt2">50px 이동</span>
</body>
우선 버튼 두 개와, 박스 모양으로 만들 span 태그를 만들어 줍니다. 버튼 1번을 누르면, 박스 1번은 이름 그대로 500px만큼만 이동하게 해 줄 것이고, 버튼 2번을 누르면, 박스 2번은 이름 그대로 50px만큼 이동할 건데, 이때 박스 2번은 누를 때마다 50px씩 이동하게끔 하겠습니다.
<script>
$(function(){
$(".btn1").click(function(){ // 버튼 1번을 클릭(click)하면, 함수를 실행하는데,
$(".txt1").animate({marginLeft:"500px"}, 2000, "linear", function(){
// 박스 1번이 왼쪽으로부터 500px만큼 이동(여백을 주다)할 거야, 2초(2000) 동안, 일정한 속도로(linear)
alert("이동 끝"); // 그리고 애니메이션이 끝나면 "이동 끝"이라는 alert 창을 띄울 거야!(콜뱃 함수)
});
});
$(".btn2").click(function(){ // 버튼 2번도 클릭하면 함수를 실행하는데,
$(".txt2").animate({marginLeft:"+=50px"}, 500, "linear");
// 박스 2번은 왼쪽으로 50px만큼 0.5초에 걸쳐 일정하게 갈 거야. 근데 누를 때마다 50px씩 가는 거니까,
// 왼쪽으로부터 50px씩 계속 더해주기 위해 +=50px 이렇게 입력해줬어.
});
});
</script>
주석으로 어떤 원리로 동작하는지 표기해뒀습니다.
CSS 속성을 변수로 지정
버튼을 누르면, 박스의 색을 변경하고 싶습니다. 당연히 레드 버튼은 빨간색으로, 블루 버튼은 파란색, 블랙 버튼은 검정색으로 출력할 건데요? 단순히, 저 버튼을 눌렀을 때 backgroundColor를 red, blue, black으로 주는 것이 아닌, 저 버튼의 CSS 속성을 그대로 따라가서 색을 입혀주고 싶습니다.
<script>
$(document).ready(function(){
$("button").click(function(){
let bgColor = $(this).css("background-color"); // bgColor란 변수에, 본인의 background-color가 들어오게끔
$("#box").css("background-color", bgColor); // #box의 background-color로, 변수 bgColor 입력
});
});
</script>
먼저, button을 클릭했을 때 function을 주도록 하던 대로 코드를 입력해 줬습니다. 그리고 let으로 변수를 지정해줄 건데요, 이 bgColor라는 변수에 본인(this)의 CSS 속성 backgroundColor를 입력해 줬습니다. 그러니까 변수 bgColor엔 누르고 있는 버튼의 배경색이 입력이 된 것이죠. 그리고 박스의 backgroundColor로, 특정 색이 아닌, 변수 bgColor를 입력해 줬습니다. 이렇게 특정 색이 아닌, 버튼의 색을 변수에 넣어(추종해서) 색을 변경해주는 것까지 해 봤습니다.
(코드펜에서는 box 크기를 width : 200px, height : 200px로 크기 조정을 좀 해 줬습니다.)
내일부터는 AJAX 진도를 나가고, 바로 예전에 HTML과 CSS로만 구성해 놓은 뼈대에, JavaScript를 이용해 동적인 효과를 주고, 다음주에는 클론 코딩 연습만 하다 개인 프로젝트를 하나 진행할 것 같습니다. 아무튼, 그렇기 때문에 오늘 밤 ~ 새벽까지 공부 할 내용은, 아코디언 메뉴랑 다양한 속성들을 좀 많이 해 봐야 할 것 같습니다.
'FE > jQuery' 카테고리의 다른 글
| [jQuery] 아코디언 메뉴 개발 (0) | 2021.06.30 |
|---|---|
| [jQuery] 폰트 키우기 / 윈도우 Scroll 이벤트 (0) | 2021.06.29 |
| [jQuery] 라이브러리 연동 2 / class 동작 (0) | 2021.06.28 |
| [jQuery] 라이브러리 파일 연동 및 복습 (0) | 2021.06.26 |
댓글