自己写个动画队列

最新推荐文章于 2021-05-25 19:32:29 发布

weixin_34368949

最新推荐文章于 2021-05-25 19:32:29 发布

阅读量130

点赞数

文章标签： python javascript ViewUI

原文链接：https://my.oschina.net/airxiechao/blog/1377332

版权

2019独角兽企业重金招聘Python工程师标准>>>

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>animate demo</title>
    <style>
        div {
            background-color: #bca;
            width: 200px;
            height: 1.1em;
            text-align: center;
            border: 2px solid green;
            margin: 3px;
            font-size: 14px;
        }
        button {
            font-size: 14px;
        }
    </style>
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<button id="go1">&raquo; Animate Block1</button>
<div id="block1">Block1</div>

 
<script>
/**
* 动画工厂方法
*/
function Animate(ele){
    return {
        ele: ele,
        queue: [],
        added: false,
        
        //添加动画
        addAnimate: function(fx, ms){
            this.added = true;
            
            var style = Object.keys(fx)[0];
            var val_style = fx[style];
            var val_old = parseInt($(this.ele).css(style));
            
            var prog = 0;
            var timer = setInterval(function(){
                prog += 1;
                if(prog == 100){
                    clearInterval(timer);
                    
                    var done = this.queue.shift();
                    if(done){
                        done();
                    }
                }
                
                var val_new = val_old + (val_style-val_old)*prog/100;
                $(this.ele).css(style, val_new+'px');
                
            }.bind(this), ms/100);
            
            return this;
        },
        
        //添加到动画队列
        addQueue: function(fx, ms){
            if(!this.added){
                this.addAnimate(fx, ms);
            }else{
                this.queue.push(
                    function(){
                        this.addAnimate(fx, ms);
                    }.bind(this)
                );
            }
            return this;
        }
    }
}
    
$( "#go1" ).click(function() {
    //示例
    Animate("#block1")
        .addQueue({'width': 300}, 1000)
        .addQueue({'height': 200}, 500)
        .addQueue({'width': 400}, 1000)
});
 
</script>
 
</body>
</html>

转载于:https://my.oschina.net/airxiechao/blog/1377332