[jQuery] 제이쿼리 애니메이션

다음 9가지 슬라이드 애니메이션 이펙트 적용하고자 합니다.

 

: 하고

보이고, 없어지고 , 한번씩 번갈아 가며 적용( 토글) 애니메이션 효과입니다.

각  스크립트는 아래와 같습니다.

  :  사라지고, 보이게 하는 효과

 [show, hide, toggle]

<script type="text/javascript">
    $(function() {
        $("#show").click(function() {
            $("#theDiv").show("fast"); // <-> slow
        });
        $("#hide").click(function() {
            $("#theDiv").hide(1000, "linear");
            //1초간 리니어로 없어짐
        });
        $("#toggle").click(function() {
            $("#theDiv").toggle("slow", completion);
        });
        $("#show2").click(function () {
            $("#mDiv2").show(3000).text("show Text from jQuery.");
        });
        $("#hide2").click(function () {
            $("#mDiv2").hide(4000);
        });
    });

    function completion() {
        $(this).text("애니메이션 진행");
    }
</script>

[fadeIn, fadeOut, faedTo] : 앞의 숫자는 시간이고 (1초 =1,000), 뒤는 적용 % 입니다.

0.3은 30%만 보이는 것입니다. 1.0 = 100%로 다 보이는 효과입니다

<script type="text/javascript">
    $(function() {
        $("#fadein").click(function() {
            $("#theDiv").fadeIn(300);
            // or fast, slow로 대치 가능
        });
        $("#fadeout").click(function() {
            $("#theDiv").fadeOut(1000);
        });
        $("#fadeto3").click(function() {
            $("#theDiv").fadeTo(300, 0.3);
        });
        $("#fadeup").click(function() {
            $("#theDiv").fadeTo(500, 1.0)
        });
        $("#pulse").click(function() {
            $("#theDiv").fadeTo(200, 0.3)
                .fadeTo(200, 1.0)
                .fadeTo(200, 0.3)
                .fadeTo(200, 1.0);

        });
    });
</script>

[slide]

<script type="text/javascript">
    $(function() {
        $("#slideup").click(function() {
            $("#theDiv").slideUp("fast");
        });
        $("#slidedown").click(function() {
            $("#theDiv").slideDown("slow");
        });
        $("#toggle").click(function() {
            $("#theDiv").slideToggle("1000");
        });
    });
</script>