jQuery中的slideToggle问题

Question

我有一张表，其中将有数千条记录（div元素）。每个div都是可点击的，当我点击每个记录时，将使用slideToggle显示隐藏在单击的div下的div。

由于记录数量非常高，因此slideToggle的效果并不理想。它只是显示div而不是滑动。

我有以下事件处理程序代码

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

我不想将这些记录分成几页。

我有什么办法可以让slideToggle效果流畅吗？

由于

Answer 1

由于您在千位之间切换一个元素，所有浏览器都会显示延迟。比其他人更多。这与浏览器和版本的内存使用有关，但也与用户机器有关。显然，更好的机器可以很好地操纵更多的DOM元素。

所以，我创建了一个小提琴，其中有一个解决方法可以帮助您：http://jsfiddle.net/9vMEV/6/。

这个想法是：如果父级大小是固定的，则子级滑动动画会窒息，因为它将是唯一被动画化的元素。因此，在开始滑动子height之前，我更新了代码以设置父div。

将for限制从500更改为1000,10000,50000 ......您的浏览器有时会无法设置更多动画。也许在显示任何页面之前会崩溃......

在我的测试中，即使有大约3万个td元素，动画也很流畅。所以这个想法可以解决你的问题。

但我认为如果你不想在很多页面中拆分这个大页面，那么更好的选择是：使用像标签这样的div，显示并隐藏其中的几百个tds。在几乎所有浏览器中，display: none的父级的子级不会在动画上处理，也不会导致延迟。

Answer 2

您是否尝试过设置持续时间以进行de slideToggle效果？ 像：

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