为什么我看不到我的jQuery UI动画？

Question

我有一个元素进入幻灯片放映,当幻灯片进来时,此元素使用jQuery UI效果explode显示.

$e.show('explode', {}, 1000);

当我第一次运行它时,我根本没有看到元素出现.所以我想"哦,它必须是z-index"并将元素的z-index设置为10并确保它已position定义.(幻灯片的z-index为5)

这使得图像在效果完成后显示出来.我把幻灯片隐藏起来进行测试,果然,动画发生在幻灯片后面,看起来更低了z-index.

为什么我不能在动画之后看到元素？

Answer 1

发生了什么

当某些元素使用jQuery UI动画时,根据效果,可以克隆元素本身.您正在操作的元素($ e)实际上是隐藏的,而不是动画时DOM的一部分,因此您的CSS规则在这里没用.一些规则使用jQuery应用于克隆元素,但是,z-index不是其中之一.

使用CSS动画修复它

我建议使用直接操作元素的CSS动画,而不需要克隆元素.虽然这会使效果explode稍微复杂一些,但不仅仅是维护CSS规则,而且CSS动画比jQuery UI动画带来了巨大的性能提升.(jQuery UI单独应用动画的每个"步骤",意味着许多重绘).然而,对此的限制是跨浏览器兼容性,因为看起来IE仍然不能与此相提并论.

使用z-index修复它

如果你一直都在为你的动画使用jQuery UI,或者不能冒着缺乏跨浏览器兼容性的风险,那么仍然有希望.在我的测试中,'cloned'元素暂时添加了一个类ui-effects-explode.似乎大多数需要克隆原始元素的jQuery UI动画应用具有类似语法的类(ui-effects-*).

为了节省自己对个别效果的挫败感,你可以制作一个CSS规则,如下所示:

[class^=ui-effects] {
    z-index: 10;
}

凡^=表示"开头为".这会将z-index应用于jQuery UI命名空间中的任何克隆元素,并应解决您的问题.