jQuery動畫效果2(animate移位效果/stop停止/delay延時效果)

1、調用animate()方法可以創建自定義動畫效果

它的調用格式爲:

$(selector).animate({params},speed,[callback])

其中,params參數爲製作動畫效果的CSS屬性名與值,speed參數爲動畫的效果的速度,單位爲毫秒,可選項callback參數爲動畫完成時執行的回調函數名。



調用animate()方法不僅可以製作簡單漸漸變大的動畫效果,而且還能製作移動位置的動畫,在移動位置之前,必須將被移元素的“position”屬性值設爲“absolute”或“relative

<body>
        <h3>製作移動位置的動畫</h3>
        <span></span>
        <div id="tip"></div>
        
        <script type="text/javascript">
            $(function () {
                $("span").animate({
                    left: "+=100px"
                }, 3000, function () {
                    $("span").animate({
                        height: '+=30px',
                        width: '+=30px'
                    }, 3000, function () {
                        $("#tip").html("執行完成!");
                    });
                });
            });
        </script>
    </body>


2、調用stop()方法停止當前所有動畫效果

在動畫完成之前,停止當前正在執行的動畫效果,這些效果包括滑動、淡入淡出和自定義的動畫,它的調用格式爲:

$(selector).stop([clearQueue],[goToEnd])



3、delay()方法延時執行動畫效果

調用格式爲:

$(selector).delay(duration)




發佈了76 篇原創文章 · 獲贊 29 · 訪問量 13萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章