UI/DOM使用jQuery

排序

所以，我搜遍互聯網來找到這個幫助...UI/DOM使用jQuery

我有一個條形圖，其中條/值進行排序左到右與左邊的最大值。基於用戶交互，條形圖/值可能會發生變化，例如，中間條可能需要向左移動1個或多個點。這必須在飛行中完成，而不移除DOM元素，因爲我需要動畫從左到右的動作......這是用戶吸引力，這對於項目非常重要。

所以，我想我的問題是，既然你不能訴諸DOM元素，並在同一時間動畫他們，你如何跟蹤運動。我已經提出了在頁面加載時創建圖表的初始索引並在更改時更新索引的想法。從邏輯上講，我對此很難。另外，如果有人這樣做，使用data屬性來索引什麼是最好的方法？這不僅僅是HTML5，並且可能在舊版瀏覽器中不受支持，或者jQuery是否保留了與HTML5無關的緩存？

我對javascript/jQuery相當陌生。我會說我已經使用了2年，但我真的只做過小的jQuery動畫和驗證。真的會喜歡社區的一些輸入！

謝謝！

來源

2012-08-15 user1566728

使用「數據 - 」屬性絕對是一個可能的解決方案。 '$ .data'甚至可以在舊版瀏覽器中獲取數據（它被視爲非標準屬性），所以不用擔心。 – 2012-08-15 01:07:23

你是對的，你不能通過排序動畫元素。

訣竅是用CSS屬性來定位圖形空間內的條形，例如。 left或margin-left。

然後你有什麼，當以正確的方式改變，會給動畫效果。

所有你需要做的就是依次循環遍歷每個小節，計算它的新的CSS left/margin-left屬性，並使用jQuery的.animate()來使它滑動到它的新位置。

假設杆被定位margin-left和條的高度也需要改變，那麼jQuery的一般形式是：

$(".bars").each(function(i, bar) { 
    var $bar = $(bar); 
    var marginLeft = ........;//expression that calculates or fetches the new margin-left property for bar i 
    var height = ........;//expression that calculates or fetches the new height property for bar i 
    $bar.animate({ 
     'margin-left': marginLeft, 
     'height': height 
    ); 
})

沒有必要進行排序任何東西，或使用數據屬性。

來源

2012-08-15 03:31:28

大部分時間，我終於在昨晚想到了這一點。我的問題不一定是動畫，而是它們在更改時對條的排序，注意到DOM中的順序從不改變。我結束了使用REL屬性，更新它的條值更改。我能夠索引REL屬性，對它們進行排序並使用與索引匹配的jQuery對象來引用每個欄。 – user1566728 2012-08-15 14:27:25

UI/DOM使用jQuery

回答

相關問題