jquery - jQuery中的slideToggle问题

Question

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

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

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

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

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

有什么办法可以让slideToggle 效果平滑吗？

谢谢

score 3 · Accepted Answer

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

所以，我用一种解决方法创建了一个 Fiddle 来帮助你：http: //jsfiddle.net/9vMEV/6/。

这个想法是：如果父级大小是固定的，那么子级滑动动画将被扼杀，因为它将是唯一被动画的元素。height因此，我更新了您的代码以在开始滑动 child 之前设置 parent div。

将限制从 500 更改为for1000、10000、50000... 会有一段时间，您的浏览器无法播放更多动画。并且可能会在显示任何页面之前崩溃...

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

但我实际上认为，如果您不想将这个大页面拆分为多个页面，更好的选择是：使用一些 div，如 tabs，在其中显示和隐藏数百个 td。在几乎所有浏览器上，父级的子级display: none都不会处理动画并且不会导致延迟。

score 1 · Accepted Answer

您是否尝试过设置幻灯片切换效果的持续时间？喜欢：

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

2 回答 2