jQuery(6)——jQuery animate動畫

時間 2019-11-24

原文原文鏈接

## jQuery 效果- 動畫

語法：css

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

必需的 params 參數定義造成動畫的 CSS 屬性。html

可選的 speed 參數規定效果的時長。它能夠取如下值："slow"、"fast" 或毫秒。jquery

可選的 callback 參數是動畫完成後所執行的函數名稱。函數

jQuery全部動畫屬性均可以被動畫化爲一個單獨的數值，除了下面所提到的之外，大多數非數字的屬性不能使用基本的jQuery功能進行動畫（例如，寬度、高度或者左邊能夠被動畫化，可是背景顏色，字體顏色不能）學習

參考手冊：https://www.w3cschool.cn/jquery/eff-animate.html字體

jQuery stop() 方法

jQuery stop() 方法用於中止動畫或效果，在它們完成以前。
stop() 方法適用於全部 jQuery 效果函數，包括滑動、淡入淡出和自定義動畫。

語法:動畫

$(selector).stop(stopAll,goToEnd);

可選的 stopAll 參數規定是否應該清除動畫隊列。默認是 false，即僅中止活動的動畫，容許任何排入隊列的動畫向後執行。

可選的 goToEnd 參數規定是否當即完成當前動畫。默認是 false。
所以，默認地，stop() 會清除在被選元素上指定的當前動畫。ui

練習demo:spa

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>jQuery學習 animate動畫</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
    <script>
    $(document).ready(function(){

        $("#btn1").click(function(){
            $("#test").animate({
                left:'50px',
                top:'100px',
                opacity:'0.8',
                height:'150px',
                width:'250px',
            });
        }); 

        $("#btn2").click(function(){
            $("#test2").animate({
                height:'toggle',
                width:'toggle',
            });
        }); 

        $("#btn3").click(function(){
            var obj=$("#test3")
            obj.animate({height:'300px'},'slow');
            obj.animate({width:'300px'},'slow');
            obj.animate({height:'200px'},'slow');
            obj.animate({width:'200px'},'slow');
            obj.animate({opacity: "0.5",},'slow');
        });
        $("#btn4").click(function(){
            $("#test3").stop();
        })
        
    })
    </script>
    <style>
        .box,.box2,.box3{
            width: 300px;
            margin:0 auto;
            border: 2px solid green;
            position: relative;
        }
        .box2{
            margin-top:220px;
        }
        .box3{
            background-color: red;
        }
        #test{
            background:#98bf21;
            width:200px;
            position:absolute;
        }
        #test2,#test3{
            background-color:yellow;
            width:200px;
            height: 200px;
        }
    </style>
</head>
<body>
    <div class="box">
        <button id="btn1">點擊</button>
        <div id="test">
                默認狀況下，全部的 HTML 元素有一個靜態的位置，且是不可移動的。 
                若是須要改變爲，咱們須要將元素的 position 屬性設置爲 relative, fixed, 或 absolute!
        </div>
    </div>
    <div class="box2">
        <button id="btn2">toggle實現顯示隱藏</button>
        <div id="test2">
            toggle
        </div>
    </div>
    <div class="box3">
            <button id="btn3">多個animate</button><button id="btn4">中止</button>
            <div id="test3">
                多個animate
                jQ沒法的animate沒法修改背景色，
                能夠設置父級背景色和子級的背景色+透明度opacity來修改(雖然有點不可預知)
            </div>
        </div>
</body>
</html>

預覽code

See the Pen mzWLxb by 練濤 (@liantao) on CodePen.

1. JQuery animate動畫
2. jquery的animate動畫
3. jquery動畫-animate方法
4. jQuery中動畫animate(下)
5. jquery的animate({})動畫整理
6. jQuery animate()動畫效果
7. jQuery中動畫animate(上)
8. jQuery---自定義動畫 animate();
9. jquery animate 動畫效果使用說明
10. svg動畫 animate
更多相關文章...
• ionic 加載動畫 - ionic 教程
• jQuery Mobile 表單滑動條 - jQuery Mobile 教程
• 算法總結-滑動窗口
• SpringBoot中properties文件不能自動提示解決方法

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。