jQuery旋鈕動畫 - 如何停止一路去最大值

Question

我有下面的代碼，它工程很好 - 但我需要動畫停止在值，而不是最大值。目前它一直達到最大值並且不會停在旋鈕的值上。有任何想法嗎？

jQuery(document).ready(function($) { 
    $('.dial').val(0).trigger('change').delay(0); 
var myColor = 'red'; 
    $(".dial").knob({ 
    'min':0, 
    'max':100, 
    'readOnly': true, 
    'width': 120, 
    'height': 120, 
    'fgColor': '#333', 
    'dynamicDraw': true, 
    'thickness': 0.2, 
    'tickColorizeValues': true, 
    'skin':'tron' 
}) 
     var tmr = self.setInterval(function(){myDelay()},50);   
     var m = 0;  
     function myDelay(){ 
      m += 1; 
      switch(m) 
      { 
      case 40: 
        myColor = 'yellow'; 
       break; 
      case 70: 
        myColor = 'green'; 
       break;      
      case 100: 
       window.clearInterval(tmr); 
       break; 
      }    
      $('.dial').trigger('configure', {'fgColor':myColor}); 
      $('.dial').val(m).trigger('change'); 
     }    
}); 

Answer 1

您可以將atrting值存儲在document.ready中的變量值中。

然後您可以檢查您的間隔函數中的值，並且如果它的值大於初始值，請停止更新控件。

代碼：

var maxVal = 0; 
jQuery(document).ready(function ($) { 
    maxVal = $('.dial').val(); 
    $('.dial').val(0).trigger('change').delay(0); 
    var myColor = 'red'; 
    var knob = $(".dial").knob({ 
     'min': 0, 
      'max': 100, 
      'readOnly': true, 
      'width': 120, 
      'height': 120, 
      'fgColor': '#333', 
      'dynamicDraw': true, 
      'thickness': 0.2, 
      'tickColorizeValues': true, 
      'skin': 'tron' 
    }); 
    var tmr = self.setInterval(function() { 
     myDelay(); 
    }, 50); 
    var m = 0; 

    function myDelay() { 
     m += 1; 
     if (m > maxVal) { 
      window.clearInterval(tmr); 
      return; 
     } 
     switch (m) { 
      case 40: 
       myColor = 'yellow'; 
       break; 
      case 70: 
       myColor = 'green'; 
       break; 
      case 100: 
       window.clearInterval(tmr); 
       break; 
     } 
     $('.dial').trigger('configure', { 
      'fgColor': myColor 
     }); 
     $('.dial').val(m).trigger('change'); 
    } 
}); 

演示：http://jsfiddle.net/IrvinDominin/uHkN5/