Jquery - effect 함수

1. animate 함수

    <div id="target"></div>

    <style>
        #target{
            width: 200px;
            height: 200px;
            background-color: violet;
        }
    </style>

    <script>
        $("#target").click(e=>{
            $(e.target).animate({
                position : "absolute",
                left : "200px",
                top : "200px",
                width : "400px",
                height : "400px",
                opactity : "0.5"
            },2000,()=>{
                alert("애니메이션 끝!");
            });
        });
    </script>

 

 

 

2. slide 함수

slideUp	위로 움직임
slideDown	아래로 움직임
toggle	위, 아래로 움직임

 

    <div id="container">
        <div>첫번째 메뉴</div>
    </div>

    <button id="slideUpTest">슬라이드업</button>
    <button id="slideDownTest">슬라이드 다운</button>
    <button id="slideToggleTest">슬라이드토글</button>

    <style>
        div#container>div{
            height: 300px;
            background-color: cornflowerblue;
        }
    </style>

    <script>

        $("#slideToggleTest").click(e=>{
            $("#container>div").toggle(1000);
        })


        $("#slideUpTest").click(e=>{
            $("#container>div").slideUp(1000);
        });


        $("#slideDownTest").click(e=>{
            $("#container>div").slideDown(1000);
        })

    </script>

 

 

 

3. fade 함수

 

fadeIn	서서히 나타나는
fadeOut	서서히 사라지는
fadeToggle	서서히 나타다는 && 서서히사라지는
fadeTo	범위내로 서서히 나타나는

 

    <img src="https://item.kakaocdn.net/do/494ea37cf81a6a1efb5dfab1783ab4878f324a0b9c48f77dbce3a43bd11ce785" alt="" width="200" height="200">
    <br><br><br><br>
    <button id="fadeInTest">fadeIn</button>
    <button id="fadeOutTest">fadeOut</button>
    <button id="fadeToggleTest">fadeToggle</button>
    <button id="fadeToTest">fadeTo</button>

    <script>
        $(function(){
            $("br").last().nextUntil("script").each((i,v)=>{
                $(v).click(function(e){
                    switch(i){
                        case 0 : $("img").fadeIn(1000);break;
                        case 1 : $("img").fadeOut(1000);break;
                        case 2 : $("img").fadeToggle(1000);break;
                        case 3 : $("img").fadeTo(1000,0.3);break;
                    }
                })
            })
            $("img").hover(e=>{
                $(e.target).fadeTo(1000,1);
            }, e=>{
                $(e.target).fadeTo(1000,0.3)
            })
        })

    </script>

    <style>
        img{
            opacity: 0.3;
        }
    </style>