jQuery和旋鈕動畫問題

我想動畫一個數字，以便它在頁面加載時滾動到數字中。我正在使用另一個庫來顯示撥號（http://anthonyterrien.com/knob/）。我遇到的問題是，每次運行它時數量似乎都不一樣。它應該是一個以19420結尾的一致數字。然而，有時它會更低，並且似乎沒有任何特定的模式。jQuery和旋鈕動畫問題

我的JS代碼如下所示：

$(function() { 
    $('#dial').knob({ 
     min: '0', 
     max: '25000', 
     readOnly: true 
    }); 

    $({ 
     value: 0 
    }).animate({ 
     value: 19420 
    }, { 
     duration: 950, 
     easing: 'swing', 
     step: function() { 
      $('#dial').val(Math.round(this.value)).trigger('change'); 
     } 
    }); 
});

小提琴可以在這裏找到：http://jsfiddle.net/ND5Sf/

我做了什麼錯誤的或者是有什麼我已經錯過了？如果不是，這兩個庫不兼容？

來源

2013-08-16 Serberuss

可能因爲950的持續時間，所述蜱是太輕微，我想錯過了一些東西，如果你設置3000很好的作品 –

剛剛嘗試過3000，我仍然有同樣的問題 – Serberuss

問題是因爲您使用step函數而不是progress。

步驟：

一個函數被調用用於每個動畫元件的每個動畫處理的屬性。此功能提供了修改Tween 對象的機會，以便在設置屬性之前更改該屬性的值。

進展：

一個函數被調用動畫的每一步驟之後，只有一次每動畫元素無論動畫處理的屬性的數目。（版本增加：1.8）

代碼：

$(function() { 
    $('#dial').knob({ 
     min: '0', 
     max: '25000', 
     readOnly: true 
    }); 

    $({ 
     value: 0 
    }).animate({ 
     value: 19420 
    }, { 
     duration: 950, 
     easing: 'swing', 
     progress: function() { 
      $('#dial').val(Math.round(this.value)).trigger('change'); 
     } 
    }); 
});

文檔：

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

來源

2013-08-16 11:40:55

只是想知道，如果你有在頁面上多次撥號？ http://jsfiddle.net/JW2gP/1/ – jdepypere

發現它：http://jsfiddle.net/JW2gP/3/ – jdepypere

非常感謝很多，現在按預期工作。我想這會教我正確閱讀文檔 – Serberuss

jQuery和旋鈕動畫問題

回答

相關問題