반응형
[jQuery] 이미지 출력 및 숨기기
showAndHide-1.html |
| <!doctype html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>움직이는 물고기</title> <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script> <script type="text/javascript"> jQuery(document).ready(function() { jQuery("#btn").click(function() { if(jQuery("#displayDiv").css("display") == "none") { jQuery("#displayDiv").css("display", "block"); } else { jQuery("#displayDiv").css("display", "none"); } }); }); </script> </head> <body> <h1>이미지 출력 및 숨기기</h1> <hr/> <button type="button" id="btn">보기 또는 숨기기</button> <div id="displayDiv"> <img src="images/koala.jpg" width="400" height="300"> </div> </body> </html> |
| 출력결과 ① |
출력결과 ② |
showAndHide-2.html |
| <!doctype html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>움직이는 물고기</title> <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script> <script type="text/javascript"> jQuery(document).ready(function() { jQuery("#btn").click(function() { if(jQuery("#displayDiv").css("display") == "none") { jQuery("#displayDiv").show(); } else { jQuery("#displayDiv").hide(); } }); }); </script> </head> <body> <h1>이미지 출력 및 숨기기</h1> <hr/> <button type="button" id="btn">보기 또는 숨기기</button> <div id="displayDiv"> <img src="images/koala.jpg" width="400" height="300"> </div> </body> </html> |
출력결과 ① |
| 출력결과 ② |
showAndHide-3.html |
| <!doctype html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>움직이는 물고기</title> <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script> <script type="text/javascript"> jQuery(document).ready(function() { jQuery("#btn").click(function() { if(jQuery("#displayDiv").css("display") == "none") { jQuery("#displayDiv").slideDown(); } else { jQuery("#displayDiv").slideUp(); } }); }); </script> </head> <body> <h1>이미지 출력 및 숨기기</h1> <hr/> <button type="button" id="btn">보기 또는 숨기기</button> <div id="displayDiv"> <img src="images/koala.jpg" width="400" height="300"> </div> </body> </html> |
| 출력결과 ① |
출력결과 ② |
showAndHide-4.html |
| <!doctype html> <html lang="ko"> <!doctype html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>움직이는 물고기</title> <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script> <script type="text/javascript"> jQuery(document).ready(function() { jQuery("#btn").click(function() { if(jQuery("#displayDiv").css("display") == "none") { jQuery("#displayDiv").fadeIn(); } else { jQuery("#displayDiv").fadeOut(); } }); }); </script> </head> <body> <h1>이미지 출력 및 숨기기</h1> <hr/> <button type="button" id="btn">보기 또는 숨기기</button> <div id="displayDiv"> <img src="images/koala.jpg" width="400" height="300"> </div> </body> </html> |
| 출력결과 ① |
| 출력결과 ② |
| showAndHide-5.html |
| <!doctype html> <html lang="ko"> <!doctype html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>움직이는 물고기</title> <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script> <script type="text/javascript"> jQuery(document).ready(function() { jQuery("#displayDiv").fadeToggle(3000); }); </script> </head> <body> <h1>이미지 출력 및 숨기기</h1> <hr/> <div id="displayDiv"> <img src="images/koala.jpg" width="400" height="300"> </div> </body> </html> |
| 출력결과 |
※ fadeToggle() 을 사용하면 이미지가 서서히 사라진다.
반응형
'jQuery' 카테고리의 다른 글
| [jQuery] 이미지 슬라이드 만들기 (0) | 2016.11.23 |
|---|---|
| [jQuer] 움직이는 애니메이션 (0) | 2016.01.03 |
| [jQuery] 움직이는 이미지 (0) | 2016.01.03 |
| [jQuery] 무한 스크롤 이벤트 (0) | 2016.01.03 |
| [jQueyr] On / Off 이벤트 (0) | 2016.01.03 |
