반응형
목차
글 시작에 앞서 visual studio에서 jquery 코드를 작성하고 확인하는 방법을 괄호 링크에 있으니 참조하길 바란다.
(https://scribblinganything.tistory.com/298)
jquery-animate() 애니매이션 기능
animate 기능을 사용하면 웹 브라우져의 요소들을 애니매이션처럼 움직일 수 있다. 다만 애니매이션을 움직일 때 주의 해야 할 점은 css 설정에서 position 정보를 아래와 같이 설정하여야 한다.
- position 설정값
- absolute
- fixed
- relative
애니매이션 함수는 아래와 같다.
- $(selector).animate({params},speed,callback);
selector는 웹에서 요소들이고 params는 css의 인자 값들을 넣을 수 있다. 가령, width, height으로 크기를 변경할 수 있고 left로 위치를 조정할 수 있고 opcaity로 투명도를 조절 할 수 있다. speed는 변화는 속도를 조절할 수 있다. ms 시간으로 설정 가능하고 간단하게 "slow", "fast"로도 설정 가능하다.
jquery-animate() 사각형 박스를 왼쪽 오른쪽으로 이동 시키기 예제(example)
코드>>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>https://scribblinganything.tistory.com/</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#button1").click(function(){
$("#blue").animate({left: '300px'}, "slow");
});
$("#button2").click(function(){
$("#blue").animate({left: '0px'}, "slow");
});
});
</script>
<style>
.box1 {background-color: #008CBA; padding:3px; text-align: center; height:50px; width:50px;position:absolute;}
</style>
</head>
<body>
<p id = "ex1">버튼을 누르면 사각형이 이동합니다.</p>
<button id="button1">오른쪽</button>
<button id="button2">왼쪽</button>
<div class="box1" id="blue">까꿍</div>
</body>
</html>
결과>>
주석>>
결과처럼 버튼1과 2를 번갈아 클릭하니 파란색 박스가 이동하였다.
앞서 언급한것처럼 코드의 css에 position을 설정하였다.
그리고 이동에서 left는 왼쪽에 채운다는 의미로 이동을 의미하고 right는 없다. 그러므로 혼동하지 말고 사용해야 한다.
반응형
'웹관련프로그래밍(web programming) > Javascript 자바스크립트' 카테고리의 다른 글
| [Javascript] HTML 태그 사이 글짜, 요소 가져오기 (getElementById, getElementsByClassName, getElementsByName, getElementsByTagName) (0) | 2021.10.18 |
|---|---|
| [Javascript] HTML문서에 시간 입력하거나 글쓰기 (document.write) (0) | 2021.10.17 |
| [Javascript] jquery slide 효과로 화면이 나오거나 사라지게 하기 (0) | 2021.09.28 |
| [Javascript] jquery fade 기능, 천천히 사라지거나 나타내게 하기 (0) | 2021.09.27 |
| [Javascript] jquery 버튼 클릭 해서 글자 지우고 나타나게 하기 (0) | 2021.09.26 |