jquery进度条组件

依赖jquery，主要用到animate函数，问题是animate执行动画和进度条文本值变化不一致！

//进度条
//add creat4kProgressBar Function to jQuery prototype 
$.fn.creat4kProgressBar = function(configs){  
        //return when not by first time
        if($(this).find("div.progressbar4k").length > 0) return;
        //creat DOM
        var unit = "px";
        var pBar = '<div class="progressbar4k"><div class="percentage4k"></div></div>';
        var pText = '<div class="progressDataText4k"></div>';
        var pData = 0;
        var pConfigs = configs || {
            width:300,
            height:10,
            color:"#008000",
            isShowText:true,
            fontSize:10,
            fontColor:"#000"
        };
        //apend DOM and set style
        $(this).css({
            "width": pConfigs.width+100+unit,
            "margin":"5px auto",
            "clear":"both",
            "overflow": "hidden"
        }).append($(pBar)).find("div.progressbar4k").css({
            "float":"left",
            "width":pConfigs.width+unit,
            "height":pConfigs.height+unit,
            "border":"1px solid #e2e2e2",
            "border-radius":pConfigs.height+unit,
            //"box-shadow":"inset 0 0 2px #999",
            "background": "#fff",
            "position": "relative",
            "overflow": "hidden"
        }).find("div.percentage4k").css({
            "width":pData+"%",
            "height": "100%",
            "background":pConfigs.color,
            "border": "1px solid "+pConfigs.color,
            "position": "absolute",
            "left":0,
            "top":0,
            "transition": "width 2s ease"
        });
        //show progress number text or not
        if(pConfigs.isShowText){
             $(this).append($(pText)).find("div.progressDataText4k").text(pData+"%").css({
                 "float":"left",
                 "color":pConfigs.fontColor,
                 "margin":"0 0 0 15px",
                 "line-height":pConfigs.height+2+unit,
                 "font-size":pConfigs.fontSize+unit
             });
        };
    //链式调用
    return this;
};

//animate progressData when changed
$.fn.animateProgress4k = function(val,animateTime){
    var self = this;
    $(self).find("div.percentage4k").animate({width:val+"%"},{
        duration: animateTime,
        easing: "linear",
        queue : false,
        progress:function(now,fx){
            if($(self).find("div.progressDataText4k")){
                $(self).find("div.progressDataText4k").text(parseInt(fx*val)+"%");
            }
        }
    });
    return this;
};

用法：

<div id="e2e_totalProgressBar"></div>

$("#e2e_totalProgressBar").creat4kProgressBar({
                    width: 400,
                    height: 18,
                    color:"#2cbbe3",
                    isShowText:true,
                    fontSize:24,
                    fontColor:"#2cbbe3"
                });

$("#e2e_totalProgressBar").animateProgress4k(vm.progressData,500);

 

转载于:https://my.oschina.net/u/3288561/blog/1186832