1. HTML파일
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>hide, show, toggle</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="javascript.js"></script>
</head>
<body>
<button id="hide">숨기기(hidden)</button>
<button id="show">보여주기(show)</button>
<button id="toggle">toggle(hidden,show)</button>
<br/>
<button id="fadeOut">숨기기(fadeOut)</button>
<button id="fadeIn">보여주기(fadeIn)</button>
<button id="fadeToggle">fadeToggle(fadeOut,fadeIn)</button>
<br/><button id="slideUp">숨기기(slideUp)</button>
<button id="slideDown">보여주기(slideDown)</button>
<button id="slideToggle">slideToggle(slideUp,slideDown)</button>
<hr/>
<img src="../img/dog4.jpg" id="i"><br/>
<img src="../img/dog5.jpg"><br/>
</body>
</html>
1. 요소의 숨김과 표시 : hide( ), show( ), toggle( )
| .hide( ) |
선택한 요소를 사라지게 한다. |
| .show( ) |
선택한 요소를 나타나게 한다. |
| .toggle( ) |
선택한 요소에 .show( ) 메서드와 .hide( ) 메서드를 번갈아가며 적용한다. |
1-1. 효과 속도 설정 : "slow", "fast", "normal" "밀리초(ms)"
- 이미지가 사라지는 시간을 매개변수로 받는다.
- 모든 효과에 매개변수로 다 적용된다.
$(()=>{
$("#hide").click(function(){
$("#i").hide(2000);
});
$("#show").on('click', function(){
$("#i").show("fast");
});
$("#toggle").click(function(){
$("#i").toggle("slow");
});
});
2. 페이드(fade)효과 : fadeOut( ), fadeIn( ), fadeToggle( )
| .fadeOut( ) |
선택한 요소의 CSS opacity 속성값을 낮춰가며 요소를 사라지게 한다.(숨기기) |
| .fadeIn( ) |
선택한 요소의 CSS opacity 속성값을 높여가며 요소를 나타지게 한다.(표시하기) |
| .fadeToggle( ) |
선택한 요소의 fadeIn( ) 메서드와 fadeOut( )메서드를 번갈아가며 적용한다. |
$(()=>{
$("#fadeOut").on('click',function(){
$("#i").fadeOut('normal');
})
$("#fadeIn").click(function(){
$("#i").fadeIn(500)
});
$("#fadeToggle").click(function(){
$("#i").fadeToggle("fast");
});
});
3. 슬라이드효과 : slideUp( ), slideDown( ), slideToggle( )
| .slideUp( ) |
선택한 요소의 CSS height 속성값을 높여가며 사라지게 한다.(숨기기) |
| .slideDown( ) |
선택한 요소의 CSS height 속성값을 낮춰가며 나타나게 한다.(표시하기) |
| .slideToggle( ) |
선택한 요소의 sildeUp( )과 slideDown( )메[서드를 번갈아가며 적용한다. |
$(()=>{
$("#slideUp").click(function(){
$("#i").slideUp("fast")
});
$("#slideDown").on('click', function(){
$("#i").slideDown(1000)
});
$("#slideToggle").click(function(){
$("#i").slideToggle() // 매개변수를 지정하지않으면 400(0.4)초로 된다.
});
});
