Question

我有一张包含很多行的表格。而一些jquery扩展崩溃的行。然而它似乎开始没问题，然后在一段时间后我发现动画是生涩的，跳跃的。

http://jsfiddle.net/felix00111/6jesxoxk/8/

以下是jquery

$('tr.main-parent')
    .css("cursor", "pointer")
    .click(function () {

    var $children = $(this).nextUntil($('tr').not('.sub'));

    if ($children.find(':visible').length) {
        $children.find('td > div, td').slideUp(1200);
    } else {
        $children.filter('.parent').find('td > div, td').slideDown("slow");
    }
});
$('tr[class^=child-]').find('td > div, td').hide();

$('tr.parent')
    .css("cursor", "pointer")
    .click(function () {
    var $children = $(this).nextUntil($('tr').not('[class^=child-]'));
    $children.find('td > div, td').slideToggle(1200);
});
$('tr.sub').find('td > div, td').hide()

有什么想法吗？我努力设置宽度，但它仍然继续。

谢谢，

Answer 1

简而言之，您的解决方案需要太多资源，这就是跳跃的原因。

你没有使用一种非常有效的方式来选择你的元素，所以查看如此庞大的元素对于cpu来说并不是一件容易的事。而且您还可以使用非硬件加速动画同时为多个元素设置动画。 jQuery动画不是最有效的，特别是对于多个元素，因此难怪你的PC正在努力使用该动画。

为了更快地选择需要显示或隐藏的内容，您可以考虑在每行中创建另一个表。通过这种方式，您可以在内部表上使用.slideUp()（如果这是您真正想要使用的内容）。我意识到这并不是完全相同的效果，但是仍然看起来很好，并使它更顺畅。这就是我的意思：

<table>
    <thead>
        <tr>
            <th>xyz</th><th>xyz</th><th>xyz</th><th>xyz</th><th>xyz</th><th>xyz</th><th>xyz</th><th>xyz</th><th>xyz</th><th>xyz</th><th>xyz</th><th>xyz</th><th>xyz</th><th>xyz</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>xyz</td>
            <td>xyz</td>
            <td colspan="18"><!--Your inner table here--></td>
        </tr>
        <!-- more rows -->
    </tbody>
</table>

然后，你的内部桌子可以只有18个细胞宽（或者每个人都有多少......）。现在，您只需动画一个元素，而不是整个元素。另外，选择元素会更快，因为它正好在你点击的元素中。

这可能已经足够了，jQuery动画可能看起来非常流畅。如果你不想处理CSS过渡，这是可以理解的，因为那些需要一个固定高度的元素，你的动画高度。然而，CSS转换是硬件加速的，因此它们的性能会更好。

如果最终使用jQuery，您可能希望在动画之前对元素使用.stop()函数。这样，新的动画请求不会排队，而是停止当前的动画，新的动画会立即开始。

如果您不想使用CSS动画并且jQuery看起来仍然太慢，您可以使用Window.requestAnimationFrame()构建自己的动画，这也是硬件加速并且可以制作更流畅的动画。

或者，您可以使用支持硬件加速的动画库，这与使用CSS具有相同的性能优势。一个很好的选择是Velocity.js一起工作或没有jQuery，具有相同的语法，并且支持jQuery不支持的东西，比如转换。

Answer 2

我没有看到动画有任何问题，但这可能是因为我的电脑功能更强大了。

JQuery slideDown（）和slideUp（）函数有时可能会跳跃，因为它们在没有硬件渲染的情况下运行。

我会使用“requestAnimationFrame”自己编写动画，因为该功能是硬件加速的，但你最好使用CSS过渡。

以下是关于它的博文：Using CSS Transitions to SlideUp and SlideDown

如果您想了解更多关于CSS过渡如何工作的来源或更详细的描述，请写一条评论，我会尽力写出更详细的解释。

Answer 3

为您的表（或您的表类）添加以下CSS（或添加为内联CSS）

table {
     table-layout: fixed;
}

小提琴 - http://jsfiddle.net/7m7w2dm8/

Answer 4

请参阅http://jsfiddle.net/6jesxoxk/23/

我无法修改整个HTML，所以我在代码中修改了表格。我不是说这是你应该做的，但你的HTML应该看起来像运行后的样子：

$('#myTable > tbody > tr.main-parent').each(function(i, e){
     $(this)
    .nextUntil($('tr').not('.sub'))
    .filter('.parent')
    .wrapAll('<tr class="containerTr"></tr>')
    .wrapAll('<td colspan="13"></td>')
    .wrapAll('<div class="containerDiv" style:"display:none;"></div>');
});

这会将html更改为如下所示，您要显示的所有子列都位于隐藏的div中。这个div位于td:col-span:13本身。

new html format

然后当一个'主父母'＆＃39;点击你滑动div，而不是td＆＃39; s。您的原始代码会同时滑动许多元素，这不是一个好主意。将所有这些元素包装在div中并仅滑动div会好得多。

$tr.nextAll('.containerTr:first').find('.containerDiv').eq(0).slideToggle(1200);

我还更改了单击处理程序，而不是绑定到tr.main-parent，这将创建许多处理程序，为表提供一个id并绑定到表单击并检查目标。

Answer 5

如果使用 .slideToggle 替换函数 .slideUp（1200），。hide（），slideDown（“slow”），您的问题将得到解决（1200）

这是浏览器友好的，也有效。

Answer 6

这是因为你点击得太快，第一个动画线程还没有完成，你要求再玩一个。

不知道如何将它从头顶固定下来。但这应该指出你正确的方向来自己解决它

更新：用Google搜索。

How to prevent this strange jQuery .animate() lag?

表格与SlideToogle随机生涩

6 个答案: