고정 헤더 영역
상세 컨텐츠
본문 제목
JQuery ( show(), hide(), toggle(), fadeIn(), fadeOut(), fadeTo(), fadeToggle(), slideUp(), slideDown(), slideToggle() )
본문
show()
hide()
toggle()
fadeIn() 점차 나타남
fadeOut() 점차 사라짐
fadeTo() fadeTo(시간,투명도) | fadeTo(1000,0.1) 1초 동안 0.1투명도 지정
fadeToggle()
slideUp()
slideDown()
slideToggle()
hide(), show(), toggle()
<script src="C:\UI\JQuery/jquery-3.6.0.min.js"></script>
<script>
$(function() {
$("#btn1").click(funtion() {
$("p").hide(); // 노출되어있는 p테그를 숨길 수 있다.
});
$("#btn2").click(function() {
$("p").show(); // 사라진 p를 나타낼 수 있다.
});
$("#btn3").click(function() {
$("p").toggle(); // 버튼 클릭 시, 사라지고 나타나게 할 수 있다.
});
});
</script>
</head>
<body>
<button id="btn1">hide()</button>
<button id="btn2">show()</button>
<button id="btn3">toggle()</button>
<p style="background-color:yellow;">어려울 때, 친구가 진정한 친구이다.</p>
</body>
fadeOut(), fadeIn()
<script>
$(function() {
$("#btn1").click(function() {
$("p").fadeOut();
});
$("#btn2").click(function() {
$("p").fadeIn();
});
});
</script>
<body>
<button id="btn1">fadeOut()</button>
<button id="btn2">fadeIn()</button>
<p style="background-color:yellow;">어려울 때, 친구가 진정한 친구이다.</p>
</body>fadeOut()와 fadeIn() 는 hide()와 show() 처럼 p테그를 사라지고 나타내지만,
천천히 사라지고 천천히 나타내는 효과가 있다.
fadeTo()
<script>
$(function() {
$("#btn1").click(function() {
$("p").fadeTo( 1000, 0.1);
});
});
</script>
</head>
<body>
<button id="btn1">fadeTo()</button>
<p style="background-color:yellow;">어려울 때, 친구가 진정한 친구이다.</p>
</body>fadeTo(1000, 0.1) 1초 동안 투명도가 0.1로 변하며, 0.1이 되면 그 상태로 멈춰있다.
slideUp(), slideDown()
<script>
$(function() {
$("#btn1").click(function() {
$("p").slideUp();
});
$("#btn2").click(function() {
$("p").slideDown();
});
});
</script>
</head>
<body>
<button id="btn1">slideUp()</button>
<button id="btn2">slideDown()</button>
<p style="background-color:yellow;">어려울 때 친구가 진정한 친구이다.</p>
</body>slideUp() 위로 천천히 올라가며 사라지고, slideDown() 아래로 천천히 내려오며 나타나는 효과가 있다.
