幅が0でないときにdivをアニメーション化したい

Question

私はこの問題を抱えています。速度jsを使ってdivを100％から0にアニメーション化したいと思います。幅が0でないたびにアニメーション化します。divの幅は、setIntervalプロセスを使用して自動的に更新されます。このインターバルプロセスは永久に実行され、divの幅は3秒ごとに更新されます。速度jsやその他のアニメーションプラグインの機能は、幅を0％にすることです。

私のコードは次のようなものです。

// THIS IS A BIDDING PROCESS 

var progressBar = $("#progressBar"); 
var scenario = 3 
var width = 265; 
var processDuration = 60000; 
var processDelay = 3000; 
var time_per_scenario = (processDuration/scenario); 
var width_per_processDelay = (width/(processDuration/processDelay)); 

// Call the animateProgressBar for first time animation; 
animateProgressBar(); 

setInterval(function(){ 
    if(scenario != 0) { 
     if(time_per_scenario != 0) { 
      time_per_scenario -= 1000; 
      width -= width_per_processDelay; 
     } else { 
      scenario--; 
      width = 265; 
      time_per_scenario = 20000; 
      animateProgressBar(); 
     } 
    } else { 
     scenario = 3; 
    } 
}, processDelay); 

function animateProgressBar() { 

    progressBar.attr("style", "width: " + width); 

    console.log("animateProgressBar Again with scenario: " + scenario); 

    if(scenario == 0) { 

     progressBar 
     .velocity({ width: width}, { duration: 1 }) 
     .velocity({ width: 0 }, { duration: time_per_scenario }) 
     .velocity({ width: width }, { duration: 1 }) 
     .velocity({ width: 0 }, { duration: time_per_scenario, }) 
     .velocity({ width: width}, { duration: 1 }) 
     .velocity({ width: 0 }, { duration: time_per_scenario, }); 

    } else if(scenario == 1){ 
     progressBar 
     .velocity({ width: width }, { duration: 1 }) 
     .velocity({ width: 0 }, { duration: time_per_scenario, }) 
     .velocity({ width: width}, { duration: 1 }) 
     .velocity({ width: 0 }, { duration: time_per_scenario, }); 
    } else { 
     progressBar 
     .velocity({ width: width }, { duration: 1 }) 
     .velocity({ width: 0 }, { duration: time_per_scenario }); 
    } 
}; 

速度JSの問題はそれだけで、それはそれはアニメーションを行う習慣のsetIntervalプロセス内にある場合でも、1時間をアニメーション化という点です。なぜそれが起こっているのですか？

Answer 1

最後に解決策が見つかりました。

// THIS IS A BIDDING PROCESS 
 

 
var progressBar = document.getElementById("progressBar"); 
 
var scenario = 3 
 
var width = 265; 
 
var processDuration = 60000; 
 
var processDelay = 3000; 
 
var time_per_scenario = 20000; 
 
var width_per_processDelay = (width/(processDuration/processDelay)); 
 

 
var process = null; 
 

 
// Call the animateProgressBar for the first animation; 
 
animateProgressBar(); 
 

 
setInterval(function(){ 
 
    //console.log("time_per_scenario: " + time_per_scenario); 
 
    time_per_scenario -= 3000; 
 
    width -= width_per_processDelay; 
 
},3000); 
 

 
setInterval(function(){ 
 
    if(scenario != 0) { 
 
     if(time_per_scenario <= 0) { 
 
      clearInterval(process); 
 
      scenario--; 
 
      width = 265; 
 
      time_per_scenario = 20000; 
 
      animateProgressBar(); 
 
     } 
 
    } else { 
 
     scenario = 3; 
 
    } 
 
}, processDelay); 
 

 
function animateProgressBar() { 
 
    var widthAnimation = width; 
 
    var width_per_frame = (width/(time_per_scenario/5)); 
 
    //console.log("animateProgressBar Again with scenario: " + scenario); 
 
    process = setInterval(frame, 5); 
 
    var me = this; 
 
    function frame() { 
 
     if (widthAnimation <= 0) { 
 
      clearInterval(process); 
 
     } else { 
 
      widthAnimation = widthAnimation - width_per_frame; 
 
      progressBar.style.width = widthAnimation + 'px'; 
 
     } 
 
    } 
 
};

#progressBar { 
 
\t height: 20px; 
 
\t background-color: #ccc; 
 
}

<div id="outerDiv"> 
 
\t <div id="progressBar"></div> 
 
</div>