반응형
SMALL
add()메소드는 선택한 요소와 같이 행동을 해야할 요소를 선택하게 해주는 메소드이다.
말이 어렵다.
쉽게 설명하자면
1번이랑 2번이랑 같은 행동을 하게 해줘.
이정도로 설명 할 수 있을 것 같다.
문법은 이러하다.
.add(selector)조금 더 쉽게 예시를 들어 문법을 적어보자면
$('ul').add('div')위와 같은 코드가 될 것 같다.
이걸로 뭘 해야할지 생각이 안 떠올라서 그냥 animate()를 써서 장난을 쳐봤다.
<!DOCTYPE html>
<html lang="ko">
<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" />
<meta name="keywords" content="basic" />
<meta name="description" content="basic" />
<link rel="shortcut icon" href="" />
<link rel="stylesheet" href="./css/reset.css">
<link rel="stylesheet" href="./css/index.css">
<title>jQuery add()</title>
</head>
<body>
<div class="wrap">
<p class="txtp">jQuery add() 연습01</p>
<div class="txtdiv">jQuery add() 연습02</div>
<span class="txtspan">jQuery add() 연습03</span>
<button class="btn">클릭!</button>
</div>
<script src="./js/jquery-3.6.0.min.js"></script>
<script src="./js/index.js"></script>
</body>
</html>@charset "UTF-8";
.wrap{width: 1010px; margin: 50px auto 0; text-align: center;position: relative;}
.txtp{position: absolute;left: 0;top: 0;}
.txtdiv{position: absolute;left: 0;top: 20px;}
.txtspan{position: absolute;left: 0;top: 40px;}
.txtspan{display: block;}가볍게 css 짜봤다.
애니매니션을 넣기 위해서는 position을 써야한다.
$('.btn').on('click', function(){
$('.txtp').animate({left: "+=0px"});
setTimeout(function(){
$('.txtp').add('.txtdiv').animate({left: "+=100px"});
}, 500);
setTimeout(function(){
$('.txtp').add('.txtspan').animate({left: "+=100px"});
}, 500);
})setTimeout을 써서 따라오는 듯한 느낌을 구현해봤다.
결과물이다.
조금 이상하게 구현되기는 한다.
첫 클릭에는 맨 위 글자는 안움직이고 0.5초뒤에 밑에 글씨랑 같이 움직인다.
그 다음부터는 맨 위 글자라 200px씩 움직이는 것이다.
설명이 맞는지 헷갈린다.
아무튼 이렇게 한번 놀아봤다.
더 좋은 예시가 있으면 같이 공유 해주세요.
부탁드립니다.
반응형
LIST