使用jQuery对UI/DOM进行排序
使用jQuery对UI/DOM进行排序
提问于 2012-08-15 08:05:30
所以，我已经在网上寻找帮助了。
我有一个条形图，其中条形图/值从左到右排序，最大值在左侧。基于用户交互，条形图/值可能改变，并且例如，中间条可能需要向左移动一个或多个点。这必须在运行中完成，而不是删除DOM元素，因为我需要为从左到右的移动设置动画。这是为了吸引用户，这对项目非常重要。
因此，我想我的问题是，既然您不能同时对DOM元素进行排序并对其进行动画处理，那么如何跟踪移动呢？我尝试过在页面加载时创建图形的初始索引，并在做出更改时更新索引。从逻辑上讲，我很难做到这一点。另外，如果要这样做，使用data属性进行索引的最佳方式是什么？这是不是只有HTML5，并且可能在较老的浏览器中不受支持，或者jQuery保留了一个与HTML5无关的缓存？
我是javascript/jQuery的新手。我想说我已经使用它两年了，但我真的只做过小的jQuery动画和验证。我真的很喜欢来自社区的一些意见！
谢谢!
回答 1
Stack Overflow用户
发布于 2012-08-15 11:31:28
你说得对，你不能通过排序来动画化元素。
诀窍是使用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属性。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/11962562
复制相关文章
相似问题
腾讯云开发者
