带有SlideToogle的表格随机生涩 [英] Table with SlideToogle Randomly Jerky

问题描述

我有一个有很多行的表.和一些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()

;

有什么想法吗? 香港专业教育学院试图设置宽度，但仍在继续.

谢谢

解决方案

简而言之，您的解决方案需要太多的资源，这就是出现跳动的原因.

您没有使用非常有效的方式来选择元素，因此，对于cpu而言，遍历如此大量的元素并不是一件容易的事.而且，您还将使用非硬件加速的动画同时对​​多个元素进行动画处理. jQuery动画并不是最有效的，尤其是在具有多个元素的情况下，因此这也就不足为奇了.

要使其更快地选择需要显示或隐藏的内容，可以考虑在每行中创建另一个表.这样，您可以在内部表上使用.slideUp()(如果您确实要使用它).我意识到效果并不完全相同，但是imo仍会看起来不错，并使它更加平滑.这就是我的意思:

<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个单元格宽(或者您拥有的每个单元数...).现在，您可以简单地为 one 元素设置动画，而不是为整个对象设置动画.另外，选择元素的速度会快很多，因为它就在您单击的元素内.

这可能已经足够了，并且通过这些更改，jQuery动画看起来可能非常流畅.如果您不想处理CSS过渡，这是可以理解的，因为这些过渡对于要设置动画高度的元素需要固定的高度.但是CSS过渡是硬件加速的，因此它们的性能会更好.

如果最终使用jQuery，则可能需要在对元素进行动画处理之前对它们使用.stop()函数.这样，新的动画请求就不会排队，而是停止当前的动画，而新的动画将立即开始.

如果您不想使用CSS动画，而jQuery似乎仍然太慢，则可以使用 Velocity.js 巫婆可以与jQuery一起使用或不使用jQuery，具有相同的语法并且具有支持jQuery不支持的功能，例如转换.

I have a table with quite a few rows. And some jquery to expand collapse the rows. However it appears to start ok and then after a short while I find that the animation is jerky, jumpy.

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

Below is the 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()

;

Any ideas ? Ive tried hard setting the widths but it still continues.

Thanks,

解决方案

In a nutshell, your solution requires way too much resources, which is the reason for jumpiness.

You're not using a very efficient way of selecting your elements, so looking through such a massive amount of elements isn't an easy task for the cpu. And you're also animating multiple elements simultaneously with a non-hardware-accelerated animation. jQuery animations aren't the most efficient, especially with multiple elements, so it's no wonder your PC is struggling with that animation.

To make it faster to select what needs to be shown or hidden, you could consider creating another table within each row. This way you could use .slideUp() (if that's what you really want to use) on that inner table instead. I realize that's not exactly the same effect, but would imo look good nonetheless and make it much smoother. Here's what I mean:

<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>

Then, your inner table can simply be 18 cells wide (or howmany every you had...). Now you can simply animate one element, instead of a whole bunch. Plus, selecting the element will be much faster, because it's right inside the element you clicked on.

This may be already enough, and that jQuery animation might look perfectly smooth with those alterations. And it's understandable if you don't want to deal with CSS transitions, because those require a fixed height for the elements whose height you're animating. CSS transitions however are hardware accelerated, so they would perform better.

You might want to use the .stop() function on the elements before animating them, if you end up using jQuery. This way new animation requests aren't queued, but instead the current animations are stopped and the new one will start instantly.

If you don't want to use CSS animations and jQuery still seems too slow, you could construct your own animation using Window.requestAnimationFrame(), which is hardware accelerated also and would make for smoother animations.

Or, you could use an animation library that does support hardware acceleration, which would have about the same performance benefits as using CSS. One good option would be Velocity.js witch works in conjunction or without jQuery, has the same syntax and has support for things that jQuery doesn't support, like transforms.

这篇关于带有SlideToogle的表格随机生涩的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！