我有一个元素进入幻灯片放映，当幻灯片进来时，此元素使用jQuery UI效果explode出现。
$e.show('explode', {}, 1000);
当我第一次运行时，我根本没有看到元素出现。所以我想“哦，它必须是z-index”并将元素的z-index设置为10并确保它已定义position。 （幻灯片的z-index为5）
这使得图像在效果完成后显示。我隐藏幻灯片进行测试，果然，动画发生在幻灯片后面，似乎有一个较低的z-index。
为什么我不能在动画之后看到元素？
答案 0 :(得分：6)
当某些元素使用jQuery UI动画时，根据效果，可以克隆元素本身。您正在操作的元素（$ e）实际上是隐藏的，而不是动画时DOM的一部分，因此您的CSS规则在这里没用。 使用jQuery将一些规则应用于克隆元素，但是，z-index不是其中之一。
我建议使用直接操作元素的CSS Animations，而不需要克隆元素。虽然这会使像explode这样的效果稍微复杂一些，但不仅仅是维护CSS规则，而且CSS动画比jQuery UI动画带来了巨大的性能提升。 （jQuery UI单独应用动画的每个“步骤”，意味着许多repaints）。然而，对此的限制是跨浏览器兼容性，因为看起来IE仍然是not up to par with this。
如果你一直都在为动画使用jQuery UI，或者不能冒着缺乏跨浏览器兼容性的风险，那么仍有希望。在我的测试中，'cloned'元素暂时为ui-effects-explode添加了一个类。似乎需要克隆原始元素的大多数jQuery UI动画都应用具有类似语法的类（ui-effects-*）。
为了节省自己对个别效果的挫败感，你可以制定一个如下所示的CSS规则：
[class^=ui-effects] {
z-index: 10;
}
^=表示'以'开头'。这会将z-index应用于jQuery UI命名空间中的任何克隆元素，并应解决您的问题。