[jQuery] 13. 시각적인 효과 메소드 ① (show, hide, toggle / fadeIn, fadeOut, fadeToggle)

1. 시각적인 효과 메소드(Effect메소드) 

: 페이지 내에 애니메이션 효과를 만들기 위해 사용되는 메소드 집합

 

1) show()와 hid(), toggle()

: 선택된 요소가 점점 커지면서 보이고(show), 점점 작아지면서 사라지게(hide)하는 메소드

 

    <button id="hide">숨기기</button>
    <button id="show">보여주기</button>
    <button id="toggle">토글</button>

    <img id="bono" src="../1_HTML_Workspace/resources/image/bono.jpg" alt="">

    <script>
        $(function(){
            $("#hide").click(function(){
                $("#bono").hide(3000);    // 3000ms동안 서서히 사라진다.
            });

            $("#show").click(function(){
                $("#bono").show(1000);
            });

            // toggle()은 on/off기능이 있음
            $("#toggle").click(function(){
                $("#bono").toggle(1000);
            })
        })
    </script>

 

 

2. fadeIn(), fadeOut(), fadeToggle()

: 선택된 요소가 점점 투명해지면서 사라지고 점점 선명해지면서 보여지게하는 메소드

 

    <button id="fadeOut">숨기기</button>
    <button id="fadeIn">보여주기</button>
    <button id="fadeToggle">토글</button>

    <img src="../1_HTML_Workspace/resources/image/peng.jpg" id="peng">

    <script>
        $(function(){
            $("#fadeOut").click(function(){
                $("#peng").fadeOut(2000);
            })

            $("#fadeIn").click(function(){
                $("#peng").fadeIn(2000);
            })

            $("#fadeToggle").click(function(){
                $("#peng").fadeToggle(1000);
            })
        })
    </script>