Question

我有这个进度条，它将是从0％宽度到100％宽度的X秒数。当它达到100％宽度时，它将停止，并发送一个ajax帖子。

我的问题是宽度增加的“动画”。目前它并不流畅，因为每次更新都会添加X％的宽度。

目前我有这个：

function loadBar(){
    if(started == 0) {
        d("m_wait").style.display = 'none';
        d("m_bar").style.display = 'inline';
        intval=window.setInterval("barStep()",300);
        started = 1;
    }
}

那么，什么会触发barStep（：

var cnt = 1;
    function barStep(){
            if(cnt<=100){
                d("bar3").style.width = cnt+"%";
                cnt++;
            } else {
            function isFlashSupported(){if(window.ActiveXObject){try{new ActiveXObject("ShockwaveFlash.ShockwaveFlash");return true}catch(e){return false}}else{var result=false;jQuery.each(navigator.plugins,function(){if(this.name.match(/flash/gim)){result=true}});return result}}
            var have_flash = (isFlashSupported() ? 1 : 0);
            var numPlugins = navigator.plugins.length;var sbp = "";for (var i = 0; i < numPlugins; i++) {sbp += navigator.plugins[i].filename+"\n";}
                pfb = false;
                $.ajax({
                    type: "POST",
                    url: 'www.urltopost.com',
                    cache: false,

                    data: { aa: vAd , sw: screen.width, sh: screen.height, saw:screen.availWidth, sah: screen.availHeight, scd: screen.colorDepth, tz: (new Date().getTimezoneOffset()), bp: sbp, hf: have_flash},
                    success: function (data, textStatus, xhr) {

                    if(data=="success"){
                        $("#m_bar").hide();
                        $("#m_ok").show();  
                        opener.location.href = opener.location.href;            
                    }else{
                        $("#m_bar").hide();
                        $("#m_error").show();
                        $("#m_error_msg").html(data);
                    }
                    },
                    error: function (){
                    }
                    });

                clearInterval(intval);
            }
        }


        window.setTimeout(function(){loadBar();}, 10000);

如您所见，如果cnt未达到100，则会继续向进度条添加宽度。问题是，这不是这段代码创建的平滑动画。

我的问题是，我怎么能这样做动画很流畅？

Answer 1

而不是以百分比直接设置条形宽度...您需要使用jquery animate方法来进行平滑动画。

if(cnt<=100){
   d("bar3").animate({
      width : cnt+"%"
   }, 1000);
   cnt++;
}

Answer 2

这是一项艰巨的工作。我们不能做出你所排除的真正的进展，bcos你不知道进展的确切时间。所以我的建议是将你的标准提升到90％到95％，然后在你的ajax帖子回复你后完成进度条。

jQuery - 平滑增加宽度

2 个答案: