jquery - Table with SlideToogle Randomly Jerky

Question

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,

Answer 1

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.