animate
animate : css 코드를 변화시킬때 수치를 천천히 변화시킨다 ( 부드러운 변화 효과 )
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
window.onload = () => {
$(".move").click(() => {
$("img").css({ left: "300px", height: "300px", width: "350px" });
// css 는 바로 변환
});
$(".init").click(() => {
$("img").animate({ left: "0px", height: "100px", width: "130px" });
// animate 는 수치가 천천히 변화 ( 부드러운 효과 )
});
};
</script>
</head>
<body>
<button class="move">확대</button>
<button class="init">축소</button>
<hr />
<img
src="resources/images/car01.png"
width="130px"
height="100px"
style="position: relative"
/>
</body>
</html>확대는 css 를 변경하여 바로 크기가 커지지만, 축소는 animate 를 사용하여 천천히 부드러운 효과를 가지며 축소
728x90
'FE > JavaScript' 카테고리의 다른 글
| [JavaScript] jquery - slideDown, slideUp 메소드 (0) | 2024.03.27 |
|---|---|
| [JavaScript] append, html (0) | 2024.03.27 |
| [JavaScript] 클래스 추가, css 추가 (0) | 2024.03.27 |
| [JavaScript] JQuery 사용법 (0) | 2024.03.27 |
| [JavaScript] button 태그와 submit 태그의 차이 (0) | 2024.03.27 |
