[jQuery] 이미지 출력 및 숨기기

jQuery 2016. 1. 3. 14:33

[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
[jQuery] 무한 스크롤 이벤트  (0) 2016.01.03
[jQueyr] On / Off 이벤트  (0) 2016.01.03