-
[JQuery] button, effectVScode/JQuery 2022. 9. 9. 14:54
show()
-화면에 보여지게 하는 함수.
-display:block을 쓰지 않고 show 함수를 써서 화면에 보이게 함.
-각종 옵션으로 화면에 나타나는 변화에 또다른 효과를 줄 수도 있고 당연히 display:block의 내용 포함되어 실행됨
-show와 함께 다른 동작을 추가하고 싶다면 .show(function(){})처럼 show()안에 function(){}을 넣어서 실행시킴
-.show()에 익명함수를 넣으면 함수 동작 시간에 약간의 동작시간지연이 포함됨
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Effect01.html</title> <style type="text/css"> span{font-size:180%; font-weight: bold; display: none;} </style> <script src="script/jquery-3.6.0.js"></script> <script type="text/javascript"> $(function(){ $('button').click(function(){ var idx=$(this).index(); if(idx==0){ } else if(idx==1){ } else if(idx==2){ } else if(idx==3){ } }); // $('button').eq(0).click(function(){}); 아래와 같이 써도 됨 $('button:eq(0)').click(function(){ // $('span:first').css('background','yellow'); // $('span:first').show(); // 위 명령들을 하나로 합쳐서 명령할 수 있게 함수 사용환경을 제공함 $('span:first').show(function(){ $(this).css('background','yellow') }); }); $('button:eq(1)').click(function(){ // 지연시간은 익명함수 없이 함수에 직접 지정하여 동작하게 할 수도 있음 $('span:first').hide(50); }); $('button:eq(2)').click(function(){ $('button:eq(2)').click(function(){ $('span:last').show(2000,function(){ $(this).css('background','orange'); }); }); }); $('button:eq(3)').click(function(){ $('button:eq(3)').click(function(){ $('span:last').hide(2000); }); }); }); </script> </head> <body> <button>show it</button> <!-- 버튼을 만드는 또다른 방법 --> <button>hide it</button> <span>hi</span> <br> <button>show it slow</button> <button>hide it slow</button> <span>hello</span> </body> </html>
toggle()1) 태그 번호 지정하여 사용
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Effect02.html</title> <style type="text/css"> span{font-size:180%; font-weight: bold; display: none;} </style> <script src="script/jquery-3.6.0.js"></script> <script type="text/javascript"> /* var state=false; $(function(){ $('button:eq(0)').click(function(){ if(state==false){ state=true; $('span:first').show(); }else{ state=false; $('span:first').hide(); } }); }); */ $(function(){ $('button:eq(0)').click(function(){ $('span:first').toggle(1000,function(){ $(this).css('background','orange'); }); }); $('button:eq(1)').click(function(){ $('span:last').toggle(2000,function(){ $(this).css('background','yellowgreen'); }); }); }); </script> </head> <body> <button>show it / hide it</button> <span>hi</span> <br> <button>show it slow / hide it slow</button> <span>hello</span> </body> </html>
2) slide
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Effect03.html</title> <style type="text/css"> div{background:yellowgreen; margin:3px; width:80px; height:100px; float:left;} </style> <script src="script/jquery-3.6.0.js"></script> <script type="text/javascript"> $(function(){ $('#slideUp').click(function(){ $('div').slideUp(1000,function(){ $(this).css('background','blue'); }); }); $('#slideDown').click(function(){ $('div').slideDown(1000,function(){ $(this).css('background','red'); }); }); $('#slideToggle').click(function(){ $('div').slideToggle(500); }); }); </script> </head> <body> <button id="slideUp">slideup</button> <button id="slideDown">slidedown</button> <button id="slideToggle">slidetoggle</button> <br/><br/><br/> <div></div> <div></div> <div></div> <div></div> </body> </html>
fadeIn(), fadeOut(), fadeToggle()
예제1.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Effect04.html</title> <style type="text/css"> span{color:red; cursor:pointer;} div{margin:3px; width:100px; display:none; height:100px; float:left;} div#red{background: red;} div#green{background: green;} div#blue{background: blue;} </style> <script src="script/jquery-3.6.0.js"></script> <script type="text/javascript"> $(function(){ $('#fin').click(function(){ $('div').fadeIn(2000); }); $('#fout').click(function(){ $('div').fadeOut(2000); }); $('#fToggle').click(function(){ $('div').fadeToggle(2000); }); }); </script> </head> <body> <span id="fin">fade in</span> <span id="fout">fade out</span> <span id="fToggle">fade toggle</span> <br/><br/><br/> <div id="red"></div> <div id="green"></div> <div id="blue"></div> </body> </html>
예제2.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Effect05.html</title> <style type="text/css"> p{position:relative; width:400px; height:90px;} div{position:absolute; width:400px; height:65px; font-size:36px; text-align:center; color:yellow; background:red; padding-top:25px; top:0px; left:0; display:none;} span{display:none;} </style> <script src="script/jquery-3.6.0.js"></script> <script type="text/javascript"> $(function(){ $('#fadeIn').click(function(){ $('div').fadeIn(1000,function(){ $('span').fadeIn(1000); }); }); $('#fadeOut').click(function(){ $('span').fadeOut(1000,function(){ $('div').fadeOut(1000); }); }); $('#fadeToggle').click(function(){ $('div').fadeToggle(1000,function(){ $('span').fadeToggle(100); }); }); }); // fadein의 순서: div -> span // fadeout의 순서: span-> div // 만약 toggle을 사용하면 그 순서를 유지할 수 없다는 단점이 있음 </script> </head> <body> <p>안녕하세요반갑습니다</p> <div><span>success!</span></div> <button id="fadeIn">fadeIn</button> <button id="fadeOut">fadeOut</button> <button id="fadeToggle">fadeToggle</button> </body> </html>
이미지 슬라이드 만들기
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>EffectEx.html</title> <style type="text/css"> div{position:absolute; left:0; display: none;} img{width:500px; height:350px;} </style> <script src="script/jquery-3.6.0.js"></script> <script type="text/javascript"> // setInterval을 사용하여 1초에 한번씩 익명함수가 실행되게 함 // 익명함수의 내용은 모든 div를 fadeout하고, // 변수에 의해 진행되고 있는 번호로 // 현재이미지에 해당하는 div만 fadein 함 $(function(){ var num=0; setInterval(function(){ // 제일 좋은 방법 for(var i=0; i<=5; i++){ if(num==i) $('div').eq(i).fadeIn(1000); else $('div').eq(i).fadeOut(1000); } num++; if(num==6) num=0; },1500); }); </script> </head> <body> <div><img src="images/Desert.jpg"/></div> <div><img src="images/Hydrangeas.jpg"/></div> <div><img src="images/Chrysanthemum.jpg"/></div> <div><img src="images/Koala.jpg"/></div> <div><img src="images/Penguins.jpg"/></div> <div><img src="images/Tulips.jpg"/></div> </body> </html>
*setInterval(function(){ 이 안의 내용 변경 })
방법 2
$('div').eq(0).fadeOut(1000); $('div').eq(1).fadeOut(1000); $('div').eq(2).fadeOut(1000); $('div').eq(3).fadeOut(1000); $('div').eq(4).fadeOut(1000); $('div').eq(5).fadeOut(1000);
방법 3
$('div').fadeOut(1000); // 모든 div 태그 fadeOut
방법 4
for(var i=0; i<=5; i++) $('div').eq(i).fadeOut(1000); $('div').eq(num).fadeIn(1000);
'VScode > JQuery' 카테고리의 다른 글
[JQuery] image (0) 2022.09.09 [JQuery] menu생성, animate (0) 2022.09.09 [JQuery] event (0) 2022.09.09 [JQuery] DOM (0) 2022.09.09 [JQuery] 속성/필터선택자, 배열 (0) 2022.09.09