반응형
숨김
보임
숨김/보임
페이드인
페이드아웃(점점사라짐)
페이드인/아웃
서서히 투명도 0.1
서서히 투명도 0.5
지연
슬라이드 다운
슬라이드 업
슬라이드 업/다운
정지
중지
<!DOCTYPE html>
<html lang="en">
<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">
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<title>Document</title>
<style>
#img {
margin-top: 30px;
width: 300px;
}
button {
width : 120px;
margin-bottom: 5px;
font-size: 15px;
}
</style>
</head>
<body>
<div>
<div><button id="btn1">hide</button> 숨김</div>
<div><button id="btn2">show</button> 보임</div>
<div><button id="btn3">toggle</button> 숨김/보임</div>
<div><button id="btn4">fade-in</button> 페이드인</div>
<div><button id="btn5">fade-out</button> 페이드아웃(점점사라짐)</div>
<div><button id="btn6">fadeToggle</button> 페이드인/아웃</div>
<div><button id="btn7">fadeTo(0.1)</button> 서서히 투명도 0.1</div>
<div><button id="btn8">fadeTo(0.5)</button> 서서히 투명도 0.5</div>
<div><button id="btn9">delay</button> 지연</div>
<div><button id="btn10">slide down</button> 슬라이드 다운</div>
<div><button id="btn11">slide up</button> 슬라이드 업</div>
<div><button id="btn12">slideToggle</button> 슬라이드 업/다운</div>
<div><button id="btn13">stop</button> 정지</div>
<div><button id="btn14">finish</button> 중지</div>
</div>
<img id="img" src="https://yt3.googleusercontent.com/b_9EipIlhBtnwKayzvdjm8uUuRMte0qhUif5WpazM-EvmTmNEhR6u2UPvnRDjSwvw6-I1INO9Q=s900-c-k-c0x00ffffff-no-rj">
</body>
</html>
<script>
// img-effect 이미지 효과
// hide(1000) - 1초 걸쳐서 숨김
// hide("slow") - 천천히 숨김
// hide("fast") - 빨리 숨김
$(function(){
// hide() : 숨김
$("#btn1").on("click",function(){
$("#img").hide(1000);
})
// show() : 보임
$("#btn2").on("click",function(){
$("#img").show("fast");
})
// toggle()
$("#btn3").on("click",function(){
$("#img").toggle("slow");
})
// fadeIn()
$("#btn4").on("click",function(){
$("#img").fadeIn(2000);
})
// facdOut()
$("#btn5").on("click",function(){
$("#img").fadeOut(2000);
})
// fadeToggle()
$("#btn6").on("click",function(){
$("#img").fadeToggle();
})
// fadeTo()
$("#btn7").on("click",function(){
$("#img").fadeTo(2000,0.1);
})
// fadeTo()
$("#btn8").on("click",function(){
$("#img").fadeTo(2000,0.5)
})
// delay(1000) : 1초 동안 기다림
$("#btn9").on("click",function(){
$("#img").fadeOut(1000).delay(1000).fadeIn(1000);
})
// slideDown()
$("#btn10").on("click",function(){
$("#img").slideDown();
})
// slideUp()
$("#btn11").on("click",function(){
$("#img").slideUp();
})
// slideToggle()
$("#btn12").on("click",function(){
$("#img").slideToggle(1000);
})
// stop()
$("#btn13").on("click",function(){
$("#img").stop();
})
// finish()
$("#btn14").on("click",function(){
$("#img").finish();
})
})
</script>반응형
'Java Script > JQuery' 카테고리의 다른 글
| [JQuery] height(), weight() #0418수업 #5교시 (0) | 2023.04.18 |
|---|---|
| [JQuery] 함수 #0418수업 #5교시 (0) | 2023.04.18 |
| [JQuery] each, toggleClass #0418수업 #4교시 (0) | 2023.04.18 |
| [JQuery] 부모자식 요소 #0418수업 #4교시 (0) | 2023.04.18 |
| [JQuery] 복사, 대체 #0418수업 #3교시 (0) | 2023.04.18 |