jQuery數字動畫插件中的動畫衝突

我一直在研究一個jQuery插件來爲兩個數字值之間的元素文本設置動畫。 jQuery的動畫函數強制你指定一個你正在動畫的屬性。就我而言，我基本上需要在每個動畫步驟上調用text（），所以我不得不做一些簡單的工作來實現它。jQuery數字動畫插件中的動畫衝突

因爲我沒有以正常的方式使用animate（），所以我將自己暴露給衝突的動畫，因爲jQuery沒有爲我處理它。例如，如果我開始在5秒內將元素的文本動畫設置爲「500」，並立即在1秒內開始將相同元素的文本動畫設置爲「500000」，我會得到奇怪的結果，因爲它們彼此衝突。

一張圖片勝過一千個字，所以這裏的的jsfiddle： http://jsfiddle.net/XjrNC/

我的主要問題是：什麼是確保最合適的方式，當我啓動，以前的動畫被停止了新的動畫。

我的第二個問題是：到目前爲止，您對我的代碼的反饋如何？你會採取不同的方法嗎？

謝謝。

來源

2012-09-22 Aaronius

我只會分配ID而不是通過類調用...這將使用您的代碼，我在我的版本中進行了大量的編輯，所以我甚至不會這樣做。

$(function() { 
    $('#oneThousand').tweenText(500, 5000); 
    $('#fiveThousand').tweenText(500000, 1000); 
})

在你的代碼中，我感受到了$。每個的tweenText裏面是不是非常有用，IMO應該是這樣的方法之外。這個概念是對指定的選擇器執行此操作，而不是在方法中進行額外的選擇。另外，我強烈建議使用參數對象，而不是傳遞預定義的集合，然後那些不需要的可以作爲null傳遞或者只是遺漏。

此外，我添加了一個回調函數，以便您可以設置在當前tweenText完成時運行的東西。

這是我的修改。

http://jsfiddle.net/pmZHp/3/

來源

2012-09-24 22:38:55 paulj

感謝您的回覆和良好的建議！我想我可能會誤解主要問題。從使用角度來看，單獨補充它們中的每一個都很容易。我試圖解決更多的問題，其他人將如何使用插件，並確保我能夠適當地處理這些可能性。我認爲插件應該總是能夠處理多個元素（因此使用class vs. id）以及連續的/潛在的相互衝突的調用（2個連續的tweenText調用具有不同的參數）。 – Aaronius

您可以同時使用class和/或我的解決方案...從字面上看，任何選擇器都可以解決連續調用。 – paulj

啊，我明白你現在對$ .each的看法。這就說得通了。謝謝。至於接連的電話，這就是我在說的： – Aaronius

jQuery數字動畫插件中的動畫衝突

回答

相關問題