jquery實現css3動畫

時間 2019-12-11

標籤 jquery 實現 css3 css 動畫欄目 JQuery 简体版

原文原文鏈接

　　jquery animate改變元素樣式時，只支持數字值的變化，好比width，height等，可是css3屬性狀態值不少都不是數字值，而是字符串和數字混合在一塊兒，好比translate(), rotate()等等，若是要用animate使其支持css3變化，須要用到一個step參數，下面附上小demo：javascript

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="js/jquery-1.12.0.js"></script>
    <style>
        .demo{
            width:100px;
            height:100px;
            border:1px solid red;
        }
    </style>
</head>
<body>
<button>sss</button>
    <div class="demo"></div>

    <script>
        var $elem,applyEffect;
        $elem=$(".demo");
        applyEffect=function($e,v){
            $e.css({
                '-webkit-transform': 'translate3d(0px, ' +String(v)+ 'px, 0px)'
                , '-moz-transform': 'translate3d(0px, ' +String(v)+ 'px, 0px)'
                , 'transform': 'translate3d(0px, ' +String(v)+ 'px, 0px)'
            });
        };
        applyEffect($elem, 100);
        $("button").click(function(){
            $(".demo").animate({
                foo:100
            },{
                step:function(now,fx){
                    //console.log(now); //當前正在改變的屬性的實時值
                   //console.log(fx); //jquery默認動畫隊列的名字
                    //console.log(fx.elem); //執行動畫的元素
                    //console.log(fx.prop);  //執行動畫的屬性    aa
//                    console.log(fx.now);  //正在改變屬性的當前值
//                    console.log(fx.end);  //動畫結束之   360
                    //console.log(fx.unit);  //改變的屬性的單位  px
                    //$(".demo").css({"transform":"rotate("+now+"deg)"});
                    applyEffect($elem, 100-now);
                },
                duration:1000
            });
        });
    </script>
</body>
</html>

　　如今animate第一個參數裏，插入一個字段，給到設定好的目標值，而後在step裏用css來經過前面給的字段，來動態模擬動畫，經過這樣間接的方式實現了animate對css3動畫的支持.css

相關標籤/搜索

jquery+html5+css3+canvas

每日一句

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