jQuery動畫

時間 2019-12-08

標籤 jquery 動畫欄目 JQuery 简体版

原文原文鏈接

顯示與隱藏：show()、hide()

這兩個方法能夠實現無動畫的顯示與隱藏，也能夠實現有動畫版的顯示與隱藏。在括號中加入參數便可。javascript

有動畫效果的顯示：show(speed,[callback]);
有動畫效果的隱藏：hide(speed,[callback]);css

speed參數是動畫的執行速度，默認的速度有：slow，normal，fast，也能夠指定速度，默認單位毫秒。java

show(),hide()方法實現p元素的文字點擊消失，而後在顯示，並設置文字顏色爲紅色jquery

<script type="text/javascript">
    $(function() {
        $("p").click(function(){
            $(this).hide("slow",function(){
                $(this).show("slow",function(){
                    $("p").css("color","red");
                });
            });
        });
    });
</script>
<div class="wrapper">
    <p>隱藏於顯示動畫</p>
</div>

toggle()方法

在使用show(),hide()方法實現動畫時，一般要先判斷元素的顯示仍是隱藏，這樣就會使代碼顯得很長，爲了解決這個問題，能夠使用toggle方法，該方法是在顯示和隱藏之間進行切換。git

調用該方法有三種格式：github

格式一：無參數，toggle();app

格式二：邏輯參數調用格式，toggle(switch);switch是一個布爾值，switch爲true時顯示元素，爲false時隱藏元素。ide

格式三：動畫效果調用格式，toggle(speed,[callback]);動畫

三種調用方式實現圖片的顯示與隱藏，其中第一種方式是單純的圖片顯示與隱藏切換，沒有動畫。第二種方式設置參數值爲false，點擊以後隱藏圖片。第三種方式，實現圖片顯示與隱藏的切換，可是在顯示圖片的時候，給圖片添加一個一像素的實線黑色邊框this

<script type="text/javascript">
    $(function() {
        $("input:eq(0)").click(function(){
            $("img").toggle();
        });
        $("input:eq(1)").click(function(){
            $("img").toggle(false);
        });
        $("input:eq(2)").click(function(){
            $("img").toggle(3000,function(){
                $(this).css({"border":"1px #000 solid"});
            });
        });
    });
</script>
<div class="wrapper">
    <img src="http://xinxinjs.github.io/img_test/bt2.jpg" />
</div>
<input type="button" value="無參數" />
<input type="button" value="邏輯參數" />
<input type="button" value="動畫效果" />

滑動動畫

jQuery中提供了兩個實現元素滑動的方法：slideDown和slideUp方法。

slideDown()語法格式：slideDown(speed,[callback]);其功能是以動畫的效果，將所選元素的高度向下增大，使其呈現一種滑動的效果

slideUp()語法格式：slideUp(speed,[callback]);其功能是以動畫的效果，將所選元素的高度向上縮小，使其呈現一種滑動的效果

slideUp方法實現圖片向上滑動收起動畫效果，並在圖片收起以後彈出圖片已經收起效果

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
    $(function() {
        $("input").click(function(){
            $("img").slideUp(1000,function(){
                alert("圖片已經收起");
            });
        });
    });
</script>

<div class="wrapper">
    <img src="http://xinxinjs.github.io/img_test/bt2.jpg" />
</div>
<input type="button" value="點擊向上滑動圖片" />

slideToggle()方法

該方法能夠在元素向下滑動和向上滑動之間進行切換。語法：slideToggle(speed,[callback]);

slideToggle()方法實現圖片向上滑動和向下滑動的動畫切換

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
    $(function() {
        $("input").click(function(){
            $("img").slideToggle(1000,function(){
                alert("圖片滑動狀態已經變化");
            });
        });
    });
</script>

<div class="wrapper">
    <img src="http://xinxinjs.github.io/img_test/bt2.jpg" />
</div>
<input type="button" value="點擊滑動圖片" />

淡入淡出

在jQuery中經過改變元素的透明度，來實現動畫效果的方法：fadeIn和fadeOut方法

fadeIn語法：fadeIn(speed,[callback]);

fadeOut語法：fadeOut(speed,[callback]);

fadeOut方法實現圖片淡出

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
    $(function() {
        $("input").click(function(){
            $("img").fadeOut(2000,function(){
                alert("圖片淡出");
            });
        });
    });
    </script>

<div class="wrapper">
    <img src="http://xinxinjs.github.io/img_test/st2.jpg" />
</div>
<input type="button" value="點擊圖片淡出" />

fadeTo方法

該方法能夠以動畫的形式改變元素的透明度到某一指定值。語法fadeTo(speed,opacity,[callback]);
對於該方法第一個參數和第三個參數就不用說明了，這裏說明一下第二個參數opacity，這個參數值的範圍是0-1，定義元素髮生動畫完成時的透明度值

使用fadeTo方法改變圖片的透明度到指定值

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
    $(function() {
        $("input").click(function(){
            $("img").fadeTo(2000,0.5,function(){
                alert("圖片淡出");
            });
        });
    });
</script>
<div class="wrapper">
    <img src="http://xinxinjs.github.io/img_test/st2.jpg" />
</div>
<input type="button" value="點擊圖片改變透明度" />

自定義動畫

animate-簡單的動畫

調用語法：animate(params,[duration],[easing],[callback]);
其中參數params表示用於製做動畫效果的屬性樣式和值的集合，duration表示三種默認的速度字符-slow、fast、normal，可選項easing爲動畫插件使用，用於控制動畫的表現效果，一般有：linear和swing字符值。

自定義動畫，點擊開始按鈕以後圖片的寬度爲頁面的100%

<script type="text/javascript" src="jquery.min.js"></script>
        <script type="text/javascript">
            $(function() {
                $("input").click(function(){
                    $("img").animate({
                        width:100+"%"
                    },"slow","linear");
                });
            });
</script>
        <h1>點擊按鈕執行自定義的動畫</h1>
        <div class="wrapper">
            <img src="http://xinxinjs.github.io/img_test/st2.jpg" />
        </div>
        <input type="button" value="開始" />

若是爲一個元素定義多個動畫，這些動畫會造成動畫隊列，依次執行。

動畫中止stop

在jQuery中，提供stop()方法，中止正在執行的動畫，其調用格式：stop([clearQueue],[gotoEnd]);
參數clearQueue是一個布爾值，表示是否中止正在執行的動畫。參數gotoEnd也是一個布爾值，表示是否當即完成正在執行的動畫

實現點擊開始按鈕開始動畫，點擊中止按鈕當即中止動畫

<script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript">
        $(function() {
            $("input:eq(0)").click(function(){
                $("img").animate({
                    width:100+"%"
                },"slow","linear");
                $("img").animate({
                    width:50+"%"
                },"slow","linear");
                $("img").animate({
                    width:100+"%"
                },"slow","linear");
                $("img").animate({
                    width:20+"%"
                },"slow","linear");
            });
            $("input:eq(1)").click(function(){
                $("img").stop(true,false);
            });
        });
</script>
<h3>點擊開始按鈕執行自定義的動畫，點擊中止按鈕中止動畫</h3>
<input type="button" value="開始" />
<input type="button" value="中止" />
<div class="wrapper">
    <img src="http://xinxinjs.github.io/img_test/st2.jpg" />
</div>