Question

我在表格中有大约1000行，每行都看起来像

<div class="outer">
  <div class="inner_left">Name 1</div>
  <div class="inner_right">Value 1</div>
</div>

现在，我想通过jQuery动画移动右列

$(".inner_right").animate({left:'50px'});

问题：这需要一些处理器时间才能运行。

所以我的问题是：

问题：如果没有单独移动1000个div，是否有更聪明的方法呢？

当然，我可以通过首先填充第一列然后填充第二列来填充表格，每一列都在一个封闭的div中（然后只为其中一个制作动画）。但是（因为有更多的东西附加到逐行程序的填充）我宁愿另一种解决方案。重叠div的东西，其中值div既是行div的子节点又是列div的子节点。

Answer 1

我认为最好的想法是改变您的HTML：

<div class="outer">
  <div class="inner_left">Name 1</div>
  <div class="inner_right">Value 1</div>
</div>
<div class="outer">
  <div class="inner_left">Name 2</div>
  <div class="inner_right">Value 2</div>
</div>
<div class="outer">
  <div class="inner_left">Name 3</div>
  <div class="inner_right">Value 3</div>
</div>

要：

<div class="outer_left">
  <div class="inner_left">Name 1</div>
  <div class="inner_left">Name 2</div>
  <div class="inner_left">Name 3</div>
</div>

<div class="outer_right">
  <div class="inner_right">Value 1</div>
  <div class="inner_right">Value 2</div>
  <div class="inner_right">Value 3</div>
</div>

然后移动div .outer_right

Answer 2

如果您愿意在页面上包含其他库，您可能需要考虑Greensock的TweenMax。

http://api.greensock.com/js/

看看staggerTo（）方法，你可以在其中传入一个jQuery选择器，它会错开你的所有行。我发现它在动画方面比jQuery快得多。

基准信息：http://www.greensock.com/jquery/

你的伪代码是这样的：

// link to the library
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
// the function
<script>
    function staggerRows(){
        TweenMax.staggerTo($(".inner_right"), 0.2, {left:"50px"}, 0.1);
    }
</script>

jQuery在具有许多对象的类上进行动画制作

2 个答案: