您當前位置：首頁 > web前端 > htmlcss > jQuery學習筆記之（一）動畫與特效

jQuery學習筆記之（一）動畫與特效

來源：程序員人生發布時間：2015-02-10 08:34:54 閱讀次數：3410次

本節主要降級和學習jQuery的自動顯隱，漸入漸出、飛入飛出。自定義動畫等。
1.顯示和隱藏hide()和show()
對動畫來講，顯示和隱藏是最基本的效果之1，本節簡單介紹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() 對動畫來講，顯示和隱藏是最基本的效果之1，本節簡單介紹jQuery的顯示和隱藏。</em>
        </div>

以上是對hide()和show()函數的測試。

2.使用show()、hide()和toggle()方法
上個例子對show()和hide()方法做了簡單介紹，其實這兩個方法可以接受參數控制顯隱藏進程。
語法以下

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

其中，duration表示動畫履行時間的長短，可以表示速度的字符串，包括slow,normal,fast.也能夠是表示時間的整數(毫秒)。callback是可選的回調函數。在動畫完成以后履行。

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

例子和第1個例子相同，只是對hide()和show()增加了時間參數。其實toogle()也能夠加入事件參數。

2.使用fadeIn()和fadeOut()方式
對動畫效果顯隱，jQuery還提供了fadeIn()個fadeOut這兩個實用的方法，他們的動畫效果類似退色，語法與slow()和hide()完全相同。

            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="http://study.ahthw.com/gtimg/book/2014/11/201411120129479688.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相干參數

speed

可選。規定元素從當前透明度到指定透明度的速度。

可能的值：

毫秒（比如 1500）
"slow"
"normal"
"fast"

opacity

必須。規定要淡入或淡出的透明度。必須是介于 0.00 與 1.00 之間的數字。

callback

可選。fadeTo 函數履行完以后，要履行的函數。

如需學習更多有關 callback 的內容，請訪問我們的 jQuery Callback 這1章。

除非設置了 speed 參數，否則不能設置該參數。

3.幻燈片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還提供了slideUp()和slideDown()來摹擬PPT中的類似幻燈片拉簾效果，它與slow()和hide()完全相同。

以上代碼定義了1個div和1個img,用add方法組合在1起。

4.自定義動畫

斟酌到框架的通用性及代碼文件的大小，jQuery不能涵蓋所有的動畫效果，但它提供了animate()方法，能夠使開發者自定義動畫。本節主要通過介紹animate()方法的兩種情勢及利用。

animate()方法給開發者很大的空間。它1共有兩種情勢。第1種情勢比較經常使用。用法以下

animate(params,[duration],[easing],[callback])

其中params為希望進行變幻的css屬性列表，和希望變化到的終究值，duration為可選項，與show()/hide()的參數含義完全相同。easing為可選參數，通常供動畫插件使用。用來控制節奏的變化進程。jQuery中只提供了linear和swing兩個值.callback為可選的回調函數。在動畫完成后觸發。

需要注意。params中的變量遵守camel命名方式。例如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>></
 生活不易，碼農辛苦

 如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈

  