01.29.

애니메이션

fadeIn, fadeOut

페이드인, 페이드아웃 애니메이션

    <script>
        $(document).ready(function(){
            $("#btn_show").bind("click", function(){
                $("#img_1").fadeIn(2000, "easeInCubic")
            });
            $("#btn_hide").bind("click", function(){
                $("#img_1").fadeOut(2000, "easeInCubic")
            });
        });       
    </script>

fadeToggle

페이드인/아웃 토글

    <script>
        $(document).ready(function(){
            $("#btn_show").bind("click", function(){
                $("#img_1").fadeToggle(2000, "easeInCubic")
            });
        });       
    </script>

fadeTo

페이드아웃이 전체에 적용되는 반면 fadeTo는 특정 범위만 적용됨

    <script>
        $(document).ready(function(){
            $("#btn_show").bind("click", function(){
                $("#img_1").fadeTo(2000, 0.5, "easeInCubic")
            });
        });       
    </script>

*페이드아웃은 아예 완전히 없어지지만 페이드투(0으로 줬을때)는 해당 공간은 여전히 남아있음 

animate

사용자의 의도대로 여러 애니메이션을 한번에 적용할 수 있음

    <script>
        window.onload=function(){
            $("#btn_Start").bind("click", function(){
                $("#img_1").css("opacity",1)
                $("#img_1").animate({opacity:0, left:300},2000,"easeInCubic")
            });
        }   
    </script>

*stop

기존의 애니메이션을 잠시 멈추게 함 다른 애니메이션을 바로 적용하게 함

    <script>
        $(document).ready(function(){
            $("#btn_show").bind("click",function(){
                $("#img_1").stop();
                $("#img_1").animate({opacity:1},3000,"easeOutCubic");
            });
            $("#btn_hide").bind("click",function(){
                $("#img_1").stop();
                $("#img_1").animate({opacity:0},3000,"easeOutCubic");
            });
        });           
    </script>

:not(:animated)

가상요소, 해당 개체는 애니메이션되지 않게 함 사용자가 의도한대로 애니메이션 적용할 때 사용

        <script type="text/javascript">
$(function(){
    $(document).ready(function(){
        $("#img1").bind("click",function(){
            $("p:not(:animated)").animate({marginLeft:"-220px"},3000,"easeInQuad")
        });
        $("#img2").bind("click",function(){
            $("p:not(:animated)").animate({marginLeft:"0px"},3000,"easeInQuad")
        });
    });
});