0

所以，我在网上搜索了这方面的帮助......

我有一个条形图，其中条形图/值从左到右排序，最大值位于左侧。根据用户交互，条形图/值可能会发生变化，例如，中间条可能需要向左移动 1 个或多个点。这必须在不删除 DOM 元素的情况下即时完成，因为我需要为从左到右的移动设置动画……这是为了吸引用户，这对项目非常重要。

所以，我想我的问题是，既然你不能使用 DOM 元素并同时为它们设置动画，你如何跟踪运动。我玩弄了在页面加载时创建图表的初始索引并在更改时更新索引的想法。从逻辑上讲，我很难做到这一点。另外，如果要这样做，使用 data 属性进行索引的最佳方法是什么？这不是只有 HTML5 并且可能在旧浏览器中不受支持，还是 jQuery 保留了与 HTML5 无关的缓存？

我对 javascript/jQuery 相当陌生。我会说我已经使用了 2 年，但我真的只做过小型 jQuery 动画和验证。真的很喜欢社区的一些输入！

谢谢！

4

1 回答 1

0

你是对的，你不能通过排序来动画元素。

诀窍是使用 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
    );
})

无需对任何内容进行排序或使用 data 属性。

于 2012-08-15T03:31:28.363 回答