강의랑 똑같이 쳤는데 item, btn들은 잘 나오는데, 클릭해도 애니메이션 효과가 적용되지 않습니다..ㅠㅠ 왜일까요....
403
wngus17781241
投稿した質問数 9
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>
javascript
git
jquery
bootstrap
linux
HTML/CSS
python
django
回答 2
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>javascript 자동완성 안됨
0
1649
1
css float 이용하기 부분에서 :after 적용이 안됩니다
0
472
1
atom 실행 안됨
0
387
1
혹시 사용하신 지도를 개인 프로젝트에 사용해도 될까요??
0
334
0
reset.css 적용이 안됩니다...
0
526
0
제 코드에 무슨 문제가 있을까요?
0
330
1
Lorem
0
223
0
날짜출력
0
330
1
css 적용안됨
0
558
1
카페 리스트 띄우기1 에서 cafe list가 웹 화면에 표시가 되지 않습니다.
0
277
1
!ls 가 안되는경우
1
1281
3
indexOf 에 대한 설명중에 궁금한게 있습니다.
0
218
0
Request 결과값이 잘나오지 않는데, 수정해야할 부분이 있을까요?
0
329
0
ajax 수업중 오류
0
221
0
클래스 추가/제거 질문있습니다.
0
293
0
Atom-Live-Server 디렉토리 변경 질문있습니다.
0
666
2
웹페이지 코드는 어디서 받을 수 있을까요?
0
316
1
Django "배포" 부분에서 구름ide에 Connection Refused창이 뜹니다.
0
687
2
Django부분중에 write.html에 대해 질문드립니다.
0
229
0
장고3 으로 강의 따라해도 상관 없는지요?? 그리고 리뉴얼은 언제 하시나요?
0
220
1
화면이 계속 꺼져요.
0
543
3
break_continue 강좌 1분 10초
2
269
2
갑자기 동영상 끊기더니 재접속 안되네요.
0
161
0
django 2.x
1
166
1