SMALL
<style>
* {
margin:0;
padding:0;
}
.box1, .box2, .box3 {
width: 100px;
height: 100px;
background-color: #f00;
margin-bottom: 10px;
}
.box1 {
transition: width 0.5s ease-in-out;
}
.box1.active {
width: 500px;
}
.box2.active {
animation: ani 0.5s ease-in-out infinite alternate;
}
.box4 {
height: 2000px;
background-image: linear-gradient(0deg, red, green);
}
@keyframes ani {
0% {
width: 100px;
}
100% {
width: 500px;
}
}
</style>
</head>
<body>
<button class="btn1">버튼1</button>
<button class="btn2">버튼2</button>
<button class="btn3">버튼3</button>
<button class="btn4">버튼4</button>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<script src="jquery/jquery-3.6.4.min.js"></script>
<script>
$('.btn1').on('click', function() {
if($('.box1').hasClass('active')){
$('.box1').removeClass('active');
}else{
$('.box1').addClass('active');
}
});
// $('.btn1').on('click', function() {
// $('.box1').addClass('active');
// });
$('.btn2').on('click', function() {
$('.box2').addClass('active');
});
$('.btn3').on('click', function() {
$('.box3').animate({
width : 500
},500);
// 500 = 밀리세컨드 = 0.5초
});
$('.btn4').on('click', function() {
$('html, body').animate({
scrollTop : 1200
},1000);
});
</script>
LIST
'프론트엔드 개발자 > JS' 카테고리의 다른 글
| 자바스크립트 javascript 12. (6) 버튼 활용해서 다양한 이벤트 만들기 (0) | 2023.04.13 |
|---|---|
| 자바스크립트 javascript 12. (4) 클릭하면 해당페이지로 넘어가는 이벤트 발생하기 (2) 업그레이드편 (0) | 2023.04.13 |
| 자바스크립트 javascript 12. (4) 클릭하면 해당페이지로 넘어가는 이벤트 발생하기 (0) | 2023.04.13 |
| 자바스크립트 javascript 12. (3) 애니메이션을 활용하여 스크롤에 위치했을때 생겨나는 애니메이션 코드 (0) | 2023.04.13 |
| 자바스크립트 javascript 12. (2) 움직이면 고정되는 스크롤바 만들기 (0) | 2023.04.13 |
댓글