반응형
jQuery와 animate 를 이용하여 버튼을 눌렀을 때 특정 문자 등 순차적으로 보이게 하는 방법은 아래와 같습니다.
jQuery 와 animate 라이브러리를 사용하기 위한 CDN은 아래와 같으며 <head> </head>안에 넣어 사용하여야 합니다.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">버튼 눌렀을 때 한 개의 객체를 보이게 하는 방법은 아래와 같습니다.
box css에 opacity(투명도)를 0으로 주고 javascript에서 animate 문을 이용해 opacity값을 1로 변경시켜주면 순차적으로 보이게 됩니다.
javascript 쪽 1000 값을 수정하면 더 빠르거나 느리게 객체가 보이게 할수 있습니다.
$('.box-info-sub').animate({
opacity: '1'
}, 1000 );
<button class = "btn">
mybutton</button>
<div class = "box-info box-info-sub"> box </div>.box-info{
font-size: 30px;
}
.box-info-sub{
background-color: gray;
opacity: 0;
}$(document).ready(function () {
$('.btn').click(function () {
$('.box-info-sub').animate({
opacity: '1'
}, 1000 );
});
});See the Pen Untitled by HyunkwonK (@hyunkwonk) on CodePen.
버튼을 눌렀을때 여러개의 객체를 순차적으로 보이는 방법은 아래와 같습니다.
<button class = "btn">
mybutton</button>
<div class = "box-info box-info-sub"> box </div>
<div class = "box-info2 box-info-sub2"> box2 </div>
<div class = "box-info3 box-info-sub3"> box3 </div>
<div class = "box-info4 box-info-sub4"> box4 </div>.box-info, .box-info1, .box-info2, .box-info3, .box-info4{
font-size: 30px;
}
.box-info-sub, .box-info-sub2, .box-info-sub3, .box-info-sub4{
opacity: 0;
}
.box-info-sub{
background-color: gray;
}
.box-info-sub2{
background-color: green;
}
.box-info-sub3{
background-color: red;
}
.box-info-sub4{
background-color: blue;
}$(document).ready(function () {
$('.btn').click(function () {
$('.box-info-sub').animate({
opacity: '1'
}, 1000, function () {
$('.box-info-sub2').animate({
opacity: '1'
}, 1000, function () {
$('.box-info-sub3').animate({
opacity: '1'
}, 1000, function () {
$(".box-info-sub4").animate({
opacity: '1'
}, 1000);
});
});
});
});
});See the Pen 순차적으로 보이게하기 by HyunkwonK (@hyunkwonk) on CodePen.
반응형
'개발 > JavaScript' 카테고리의 다른 글
| ajax like기능 구현 (0) | 2022.05.25 |
|---|