jQuery 애니메이션과 특수효과에 대한 자세한 설명-JS 튜토리얼-php.cn

비동기식 외에

jquery에서 가장 많이 사용해야 하는 것은 애니메이션과 특수 효과입니다. 사용자에게 더 나은 경험을 제공하려면 jquery가 최선의 선택입니다. jquery의 애니메이션을 살펴보겠습니다. 특수효과 설명!

1. 표시 및 숨기기 hide() 및 show()

애니메이션에서 표시 및 숨기기는 jQuery의 표시 및 숨기기에 대해 간략하게 소개합니다.

<script type="text/javascript">
            $(function() {
                $("input:first").click(function() {
                    $("p").hide(); //隐藏
                });
                $("input:last").click(function() {
                    $("p").show(); //显示
                });
            });
        </script>
        <input type="button" value="Hide">
        <input type="button" value="Show">
        <p>点击按钮，看看效果</p>
        <div><em>本节主要降级和学习jQuery的自动显隐，渐入渐出、飞入飞出。自定义动画等。 1.显示和隐藏hide()和show() 对于动画来说，显示和隐藏是最基本的效果之一，本节简单介绍jQuery的显示和隐藏。</em>
        </div>

로그인 후 복사

위는 hide(), show() 함수에 대한 테스트입니다.

2. show(), hide() 및 전환() 메소드를 사용하세요

이전 예제에서는 show() 및 hide() 메소드를 간략하게 소개했습니다. 실제로 이 두 메소드는 매개변수 제어를 허용합니다. 표시 및 숨기기 프로세스.
구문은 다음과 같습니다

show(duration,[callback]);
hide(duration,[callback]);

로그인 후 복사

그 중 지속 시간은 애니메이션 실행 시간을 나타내며, 느림, 보통, 빠름 등 속도를 나타내는 문자열일 수도 있고 시간(밀리초)을 나타내는 정수일 수도 있습니다. 콜백은 선택적인 콜백 함수입니다. 애니메이션이 완료된 후 실행됩니다.

<script type="text/javascript">
            $(function() {
                $("input:first").click(function() {
                    $("p").hide(300); //隐藏
                });
                $("input:last").click(function() {
                    $("p").show(500); //显示
                });
            });
        </script>

로그인 후 복사

hide() 및 show()에 시간 매개변수가 추가된 점만 제외하면 예제는 첫 번째 예제와 동일합니다. 실제로 toogle()은 이벤트 매개변수를 추가할 수도 있습니다.

3. fadeIn() 및 fadeOut() 메서드 사용

jQuery는 또한 fadeIn() 및 fadeOut이라는 두 가지 실용적인 메서드를 제공합니다. 느림()과 숨김().

 fadeIn(duration, [callback]);
 fadeOut(duration, [callback]);

로그인 후 복사

예

<script type="text/javascript">
            $(function() {
                $("input:eq(0)").click(function() {
                    $("img").fadeOut(3000); //逐渐fadeOut
                });
                $("input:eq(1)").click(function() {
                    $("img").fadeIn(1000); //逐渐fadeIn
                });
            });
        </script>
        <img src="/uploads/allimg/150204/225Q14038-0.jpg">
        <input type="button" value="Hide">
        <input type="button" value="Show">

로그인 후 복사

fadeTo() 메소드 사용법.

fadeTo() 메서드는 선택한 요소의 불투명도를 지정된 값으로 점진적으로 변경합니다.

예:

<script type="text/javascript">
            $(function() {
                $("input:eq(0)").click(function() {
                    $("img").fadeOut(1000);
                });
                $("input:eq(1)").click(function() {
                    $("img").fadeIn(1000);
                });
                $("input:eq(2)").click(function() {
                    $("img").fadeTo(1000, 0.5);
                });
                $("input:eq(3)").click(function() {
                    $("img").fadeTo(1000, 0);
                });
            });
        </script>
            <p><img src="03.jpg"></p>
<input type="button" value="FadeOut">
<input type="button" value="FadeIn">
<input type="button" value="FadeTo 0.5">
<input type="button" value="FadeTo 0">

로그인 후 복사

fadeOut 관련 매개변수

속도
선택 사항. 요소가 현재 투명도에서 지정된 투명도로 변경되는 속도를 지정합니다.

가능한 값:

밀리초(예: 1500)
"slow"
"normal"
"fast"
opacity 필수입니다. 페이드 인 또는 페이드 아웃할 투명도를 지정합니다. 0.00에서 1.00 사이의 숫자여야 합니다.
콜백
선택사항. fadeTo 함수가 실행된 후 실행될 함수입니다.

콜백에 대해 자세히 알아보려면 jQuery 콜백 장을 방문하세요.

이 매개변수는 속도 매개변수를 설정하지 않으면 설정할 수 없습니다.

4. 슬라이드 SlideUp 및 SlideDown 효과

<script type="text/javascript">
            $(function() {
                $("input:eq(0)").click(function() {
                    $("div").add("img").slideUp(1000);
                });
                $("input:eq(1)").click(function() {
                    $("div").add("img").slideDown(1000);
                });
                $("input:eq(2)").click(function() {
                    $("div").add("img").hide(1000);
                });
                $("input:eq(3)").click(function() {
                    $("div").add("img").show(1000);
                });
            });
        </script>  
    <input type="button" value="SlideUp">
    <input type="button" value="SlideDown">
    <input type="button" value="Hide">
    <input type="button" value="Show"><br>
    <div></div><img src="04.jpg">

로그인 후 복사

여러 애니메이션 효과가 앞서 언급되었으며, jQuery는 PPT에서 유사한 슬라이드 커튼을 시뮬레이션하기 위해 SlideUp() 및 SlideDown()도 제공합니다. 효과는 완전히 동일합니다. 느린() 및 숨기기()와 같습니다.

위 코드는 add 메소드를 사용하여 결합된 div와 img를 정의합니다.

5. 사용자 정의 애니메이션

프레임워크의 다양성과 코드 파일의 크기를 고려할 때 jQuery는 모든 애니메이션 효과를 다룰 수는 없지만 개발자가 애니메이션을 사용자 정의할 수 있는 animate() 메서드를 제공합니다. 이 섹션에서는 주로 animate() 메서드의 두 가지 형식과 응용 프로그램을 소개합니다.

animate() 메서드는 개발자에게 많은 공간을 제공합니다. 그것은 두 가지 형태로 제공됩니다. 첫 번째 형식이 더 일반적으로 사용됩니다. 사용법은 다음과 같습니다

animate(params,[duration],[easing],[callback])
여기서 params는 변경하려는 CSS 속성 목록이고 변경하려는 최종 값인 Duration은 선택 사항 및 show()/ hide()의 매개 변수는 정확히 동일한 의미를 갖습니다. 완화는 일반적으로 애니메이션 플러그인에서 사용되는 선택적 매개변수입니다. 리듬 변경 과정을 제어하는 데 사용됩니다. jQuery는 선형과 스윙이라는 두 가지 값만 제공합니다. 콜백은 선택적 콜백 함수입니다. 애니메이션이 완료된 후 실행됩니다.

주의가 필요합니다. params의 변수는 낙타 명명 방법을 따릅니다. 예를 들어 paddingLeft는 padding-left로 작성할 수 없습니다. 또한 params는 CSS에서 숫자 값으로 표현되는 속성만 될 수 있습니다. 예를 들어 width.top.opacity 등입니다.

BackgroundColor와 같은 속성은 animate에서 지원되지 않습니다.

<style>
            div {
                background-color: #FFFF00;
                height: 40px;
                width: 80px;
                border: 1px solid #000000;
                margin-top: 5px;
                padding: 5px;
                text-align: center;
            }
        </style>
        <script type="text/javascript">
            $(function() {
                $("button").click(function() {
                    $("#block").animate({
                        opacity: "0.5",
                        width: "80%",
                        height: "100px",
                        borderWidth: "5px",
                        fontSize: "30px",
                        marginTop: "40px",
                        marginLeft: "20px"
                    }, 2000);
                });
            });
        </script>
        <button id="go">Go>></button>
        <div id="block">动画！</div>

로그인 후 복사

params에서 jQuery는 "+=" 또는 "-="를 사용하여 상대적인 변경 사항을 나타낼 수도 있습니다. 예를 들어,

<style>
            div {
                background-color: #FFFF00;
                height: 40px;
                width: 80px;
                border: 1px solid #000000;
                margin-top: 5px;
                padding: 5px;
                text-align: center;
                position: absolute;
            }
        </style>
        <script type="text/javascript">
            $(function() {
                $("button:first").click(function() {
                    $("#block").animate({
                        left: "-=80px" //相对左移
                    }, 300);
                });
                $("button:last").click(function() {
                    $("#block").animate({
                        left: "+=80px" //相对右移
                    }, 300);
                });
            });
        </script>
        <button >Go>></button>
        <button >Go>></button>
        <div id="block">动画！</div>

로그인 후 복사

는 먼저 div를 절대적으로 배치한 다음 animate()에서 -= 및 +=를 사용하여 각각 상대적인 왼쪽 및 오른쪽 이동을 달성합니다.

animate() 메소드는 아래와 같이 또 다른 형태를 가지고 있습니다:

animate(params, options)
그 중 params는 첫 번째 형태와 완전히 동일하며 options는 주로 기간을 포함하는 애니메이션 선택적 매개변수 목록입니다. , esaing , 콜백, 대기열 등, 여기서 Duration.easing.callback은 첫 번째 형식과 완전히 동일하고 queue는 부울 값으로, jQuery를 형성하는 여러 animate()가 있는 경우 현재 animate()가 다음 animate()를 따라가며, 순차적으로 실행할지(true) 아니면 동시에 false를 실행할지

다음 예는 animate()의 두 번째 사용법을 보여줍니다.

    <style>
            div {
                background-color: #FFFF22;
                width: 100px;
                text-align: center;
                border: 2px solid #000000;
                margin: 3px;
                font-size: 13px;
                font-family: Arial, Helvetica, sans-serif;
            }
            input {
                border: 1px solid #000033;
            }
        </style>
        <script type="text/javascript">
            $(function() {
                $("input:eq(0)").click(function() {
                    //第一个animate与第二个animate同时执行，然后再执行第三个
                    $("#block1").animate({
                            width: "90%"
                        }, {
                            queue: false,
                            duration: 1500
                        })
                        .animate({
                            fontSize: "24px"
                        }, 1000)
                        .animate({
                            borderRightWidth: "20px"
                        }, 1000);
                });
                $("input:eq(1)").click(function() {
                    //依次执行三个animate
                    $("#block2").animate({
                            width: "90%"
                        }, 1500)
                        .animate({
                            fontSize: "24px"
                        }, 1000)
                        .animate({
                            borderRightWidth: "20px"
                        }, 1000);
                });
                $("input:eq(2)").click(function() {
                    $("input:eq(0)").click();
                    $("input:eq(1)").click();
                });
                $("input:eq(3)").click(function() {
                    //恢复默认设置
                    $("div").css({
                        width: "",
                        fontSize: "",
                        borderWidth: ""
                    });
                });
            });
        </script>
        <input type="button" id="go1" value="Block1动画">
        <input type="button" id="go2" value="Block2动画">
        <input type="button" id="go3" value="同时动画">
        <input type="button" id="go4" value="重置">
        <div id="block1">Block1</div>
        <div id="block2">Block2</div>

로그인 후 복사

以上两个div块同时运用了三个动画效果，其中第一个div快的第一个动画添加了queue:false参数，使得前两项两个动画同时执行。可以通过重置反复测试，熟悉animate()第二种形式。

以上就是本文的全部内容了，希望大家能够喜欢。

相关推荐：

Jquery中each的三种遍历方法

JQuery动画animate的stop方法使用详解

JavaScript强化教程――jQuery动画

위 내용은 jQuery 애니메이션과 특수효과에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!