slideToggle issue in jQuery

I have a table in which there will be thousands of records(div elements). Each div is click able and when I click on each record, a div which is hidden under the clicked div will be shown using slideToggle.

Since the number of records are very high the effect of slideToggle is not the desired one. It just shows up the div instead of sliding.

I have the following event handler code

$("div.opendiv").click(function(){
    var openelem = $(this).next();
    openelem.slideToggle();     
});

I do开发者_如何学Gon't want to divide these records into pages.

Is there anything I can do so that the slideToggle effect will be smooth?

Thanks

Since you is toggling one element between thousands, all browsers will show lag to do it. Some more than others. This is related to memory usage by the browser and the version but to the user machine too. Obviously, better machines can manipulate more DOM elements well.

So, I created a Fiddle with one workaround to help you: http://jsfiddle.net/9vMEV/6/.

The idea is: if the parent size is fixed, the child sliding animation will be smother, because it will be the only element being animated. So, I updated your code to set the parent height before starting to slide the child div.

Change the for limit from 500 to 1000, 10000, 50000... There'll be a moment that your browser can't animate more. And maybe will crash before showing any page...

In my tests, the animation is nice smooth even with about 30 thousand td elements. So this idea would solve your problem in some cases.

But I actually think the better option if you don't want to split this big page in many pages is: work with some divs like tabs, showing and hiding some hundred of tds inside it. On almost all browsers children of a parent with display: none aren't handled on animations and won't cause lags.

have you tried set a duration to de slideToggle efect? like:

$("div.opendiv").click(function(){
    var openelem = $(this).next();
    openelem.slideToggle(1000);     
});