3

我有一个要进入幻灯片的元素，当幻灯片进入时，该元素使用 jQuery UI 效果explode出现。

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

当我第一次运行它时，我根本没有看到元素出现。所以我想“哦，它一定是 z-index”并将元素的 z-index 设置为 10 并确保它已position定义。（幻灯片的 z-index 为 5）

这使得图像在效果完成后显示出来。我把幻灯片藏起来测试，果然，动画是在幻灯片后面发生的，貌似有一个较低的z-index.

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

4

1 回答 1

6

发生了什么

当某些元素使用 jQuery UI 进行动画处理时，根据效果，元素本身可能会被克隆。您正在操作的元素 ($e) 实际上是隐藏的，并且在动画时不是 DOM 的一部分，因此您的 CSS 规则在这里毫无用处。一些规则适用于 jQuery 克隆的元素，但是，z-index 不是其中之一。

用 CSS 动画修复它

我建议使用直接操作元素的CSS 动画，而无需克隆元素。尽管这会使效果explode稍微复杂一些，但您不仅要维护 CSS 规则，而且 CSS 动画比 jQuery UI 动画具有巨大的性能提升。（jQuery UI 分别应用动画的每个“步骤”，这意味着许多重绘）。然而，它的一个限制是跨浏览器兼容性，因为看起来 IE 仍然无法与 this 相提并论。

使用 z-index 修复它

如果您一心想使用 jQuery UI 制作动画，或者不能冒缺乏跨浏览器兼容性的风险，那么仍有希望。在我的测试中，“克隆”元素获得了一个临时添加到它的类ui-effects-explode。似乎大多数需要克隆原始元素的 jQuery UI 动画都应用了具有相似语法的类 ( ui-effects-*)。

为了避免对单个效果的挫败感，您的万能方法是制定如下 CSS 规则：

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

where^=的意思是“开始于”。这会将 z-index 应用于 jQuery UI 命名空间中的任何克隆元素，并且应该可以解决您的问题。

于 2012-05-30T22:33:15.430 回答