jQuery旋钮animate-如何停止一直到最大值

jQuery knob animate - how to stop going all the way to maximum value

本文关键字：一直最大值何停止旋钮 animate- jQuery 更新时间：2024-04-26

我有下面的代码，效果很好，但我需要动画停止在值，而不是最大值。目前，它一直走到最大值，并没有停止在旋钮的值。有什么想法吗？

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');
        }               
});

您可以将atring值存储在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/