인프런 커뮤니티 질문&답변
작성한 질문수
강의랑 똑같이 쳤는데 item, btn들은 잘 나오는데, 클릭해도 애니메이션 효과가 적용되지 않습니다..ㅠㅠ 왜일까요....
작성
·
325
2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.item-container {
margin: 20px;
padding: 20px;
display: flex;
}
.item-container .item {
width: 100px;
height: 100px;
margin: 20px;
padding: 20px;
border: 1px solid black;
}
#item1 {
background-color: #fbffb9;
}
#item2 {
background-color: #ec7357;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>
<script>
$(function(){
$("#btn1").on("click", function(){
$("#itme1").fadeuOut();
});
$("#btn2").on("click", function(){
$("#itme1").fadeuIn();
});
$("#btn3").on("click", function(){
$("#itme2").slideUp();
});
$("#btn4").on("click", function(){
$("#itme2").slideDown();
});
$("#btn5").on("click", function(){
$("#itme2".slideToggle();
});
});
</script>
</head>
<body>
<div id="box1" class="item-container">
<div class="item" id="item1"><strong>Java</strong></div>
<div class="item" id="item2"><strong>python</strong></div>
</div>
<div>
<button id="btn1">fade out</button>
<button id="btn2">fadein</button>
<button id="btn3">slideup</button>
<button id="btn4">slidedown</button>
<button id="btn5">slidetoggle</button>
</div>
</body>
</html>
답변 2
1
1
제주피터
지식공유자
안녕하세요. 유주현님!
강사 이범재입니다.
오타를 수정했더니 잘 되네요.
한번 확인해보세요.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.item-container {
margin: 20px;
padding: 20px;
display: flex;
}
.item-container .item {
width: 100px;
height: 100px;
margin: 20px;
padding: 20px;
border: 1px solid black;
}
#item1 {
background-color: #fbffb9;
}
#item2 {
background-color: #ec7357;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>
<script>
$(function () {
$("#btn1").on("click", function () {
$("#item1").fadeOut();
});
$("#btn2").on("click", function () {
$("#item1").fadeIn();
});
$("#btn3").on("click", function () {
$("#item2").slideUp();
});
$("#btn4").on("click", function () {
$("#item2").slideDown();
});
$("#btn5").on("click", function () {
$("#item2").slideToggle();
});
});
</script>
</head>
<body>
<div id="box1" class="item-container">
<div class="item" id="item1"><strong>Java</strong></div>
<div class="item" id="item2"><strong>python</strong></div>
</div>
<div>
<button id="btn1">fade out</button>
<button id="btn2">fadein</button>
<button id="btn3">slideup</button>
<button id="btn4">slidedown</button>
<button id="btn5">slidetoggle</button>
</div>
</body>
</html>