slidein : 엘리먼트의 높이가 서서히 0에 가깝게 줄어가며 사라짐
slideDown : 엘리먼트의 높이가 0부터 원래의 높이로 서서히 늘어가면 사라짐
slideToggle : 해당 엘리먼트의 상태에 따라, 위로 사라지게 하거나 내려서 등장시킴
예제
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <style type="text/css"> div{ width: 80px; height: 50px; background: green; float: left; margin: 5px; } </style> <script src = ../js/jquery.js type="text/javascript"></script> <script type="text/javascript"> $(function(){ $('#slideUp').click(function(){ $('div').slideUp(); }); $('#slideDown').click(function(){ $('div').slideDown('slow', function(){ $(this).css('background', 'yellow'); }); }); $('#slideToggle').click(function(){ $('div').slideToggle(); }); })//ready </script> </head> <body> <button id = "slideUp">slideUp</button> <button id = "slideDown">slideDown</button> <button id = "slideToggle">slideToggle</button> <p></p> <div></div> <div></div> <div></div> <div></div> </body> </html>
실행결과
초기화면 slideup 클릭시 slidedown클릭시 토글의 경우에는 up down이 다 가능하기 때문에 생략하겠습니다
fadein : 엘리먼트의 불투명도를 점점 높여서 엘리먼트가 보이도록 함
fade out : 불투명도를 점점 감소하면서 해당 엘리먼트를 사라지게 함
fadeToggle : 엘리먼트를 감추거나 나타나기를 반복함
예제
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <style type="text/css"> p{ width: 400px; height: 90px; border: 1px solid black; } div{ width: 400px; height: 65px; font-size: 36px; text-align: center; background: red; padding-top: 25px; position: relative; top: -107px; left: 0.5px; display: none; } span{ color: yellow; display: none; } </style> <script src = ../js/jquery.js type="text/javascript"></script> <script type="text/javascript"> $(function(){ $('#fadeIn').click(function(){ $('div').fadeIn(1000, function(){ $('span').fadeIn(2000); }); }) $('#fadeOut').click(function(){ $('span').fadeOut(3000, function(){ $('div').fadeOut(1000); }); }) $('#fadeToggle').click(function(){ $('div').fadeToggle(1000, function(){ $('span').fadeToggle(2000); }); }) }); //ready </script> </head> <body> <p> 불투명도를 점점 높여서 보이도록한다 speed를 fast, normal, slow 또는 0이상의 숫자 설정 이벤트가 끝난후에 실행할 함수를 정의할 수있다 </p> <div> <span>S U C C E S !</span> </div> <button id = "fadeIn">fadeIn</button> <button id = "fadeOut">fadeOut</button> <button id = "fadeToggle">fadeToggle</button> </body> </html>
실행결과
초기화면 fadein fadeout
'JQuery' 카테고리의 다른 글
| [jQuery] 회원정보 입력 (0) | 2023.09.22 |
|---|---|
| [jQuery] animate (0) | 2023.09.22 |
| [jQuery] show hide (0) | 2023.09.22 |
| [jQuery] change (0) | 2023.09.22 |
| [jQuery] live (0) | 2023.09.22 |