Javascript 在Safari上优化jquery hide（）和show（）

我有一个网站有一个很大的轮廓，我正试图让我们的用户过滤它，这样他们就可以看到他们想要的东西。大纲的每一行都有一组类，这些类表示它所属的类别，当用户选择特定类别时，我将通过jQuery隐藏/显示它们

以下是当前位置，您可以看到它的运行：

以下是此页面的javascript和css：

$（文档）.ready（函数（）{
console.log（'working'）；
//跟踪所有当前可见的项目。
var currentlyShown=[]；
var指数；
var showAllButton=$（“#showAll”）；
//如果对象的任何类与任何选定选项匹配，则显示它。
函数showRightClasses（）{
console.log（'显示：'+currentlyShown）；
if（currentlyShown.length==0）{
showAllButton.click（）；
}
$（'.hiddenpage'）。每个（函数（i）{
if（uu.intersection（this.className.split（“”），currentlyShown.length>0）{
$（this.show（'slow'）；
}否则{
$（this.hide（'slow'）；
}
});
}
if（showAllButton.prop（'checked'））{
当前显示推送（'hiddenpage'）；
showRightClasses（）；
}
showAllButton.change（函数（）{
如果（！this.checked）{
index=currentlyShown.indexOf（'hiddenpage'）；
如果（索引！=-1）{
当前显示的拼接（索引1）；
}
}否则{
当前显示推送（'hiddenpage'）；
}
showRightClasses（）；
});
$（'.pageselector'）.change（函数（）{
subject=$（this.attr（'name'）；
如果（！this.checked）{
索引=当前显示的索引（主题）；
如果（索引！=-1）{
当前显示的拼接（索引1）；
}
}否则{
当前显示推送（主题）；
}
if（showAllButton.prop（'checked'））{
showAllButton.click（）；
}
showRightClasses（）；
});
});
.hiddenpage{
显示：无；
}
.复选框{
浮动：对；
填充：8px；
边界：4px起点#aaa；
边界半径：8px；
背景色：#eee；
}
.复选框标签{
显示：内联；
}
.导航部分{
字体大小：120%；
字体大小：粗体；
边缘顶部：1米；
}
.导航潜艇{
字体大小：粗体；
左边距：1米；
}
.导航单元{
字体大小：正常；
左边距：2米；
}
首先，如果您关心速度，请在
.show（'slow'）
和
.hide（'slow'）
中去掉'slow'参数。这将触发一个非常高性能的jQuery动画

由于你现在失去了所有的框架，这无论如何都不会好用。如果你需要动画，也许你可以尝试一些不透明度的东西，因为（基于css的）不透明度动画非常便宜

编辑：刚刚在你链接的网站上检查了这个，它只需
.show（）
和
.hide（）
就可以很好地工作。“slow”参数无疑是您的瓶颈，因此，如果您确实需要，可以删除它或寻找其他方式来设置动画。
为什么不在父级上添加/删除类并使用CSS隐藏/设置动画？@Huangism我以前没有尝试过这种方法；它比hide（）和show（）快吗？100%会更快，因为您所做的一切都是使用js添加/删除类。滞后的主要问题是由于答案中提到的js动画below@Huangism事实证明，是的。很（编辑：哎哟，克罗斯波斯特。谢谢！）谢谢，这绝对是它。我将您的答案与@Huangism关于使用css转换的建议结合起来。我的新版本对动画使用“最大高度”上的变换，然后使用不带参数的隐藏/显示。作为补充，我还设置了aria隐藏属性，试图让VoiceOver跳过Firefox上的隐藏元素，但这是徒劳的。不走运。（我相信是浏览器问题。）在Safari和Chrome上仍然可以在画外音中使用。aria-hidden应该可以使用，另一个选项是在动画完成后将其隐藏，屏幕阅读器将跳过