图层更改时的 Z-index 修改（jquery 插件修改）？

Question

我使用以下 jquery 插件新闻旋转器来显示几个不同的新闻标题： http://landofcoder.com/index .php?option=com_jdownloads&Itemid=372&task=view.download&cid=9

相当不错的标题，但它似乎没有修改当您跳转到不同的图层/故事时，z-index 会导致嵌入在第 1 层的视频始终激活，即使我单击其他图层中的新闻故事或视频也是如此。因此，例如，如果我转到另一个故事并单击播放按钮，第一个（最上面）故事上的视频将激活，而不是我正在播放的视频。

我希望有一个示例来说明如何修改脚本以方便在图层/故事更改时也更改 z-index。

我猜测可以在 script.js 文件中不透明度偏移下方的 fxStart 函数中进行修改，但我还没有达到 js 的水平。

Answer 1

好吧，我绕过后面的白屏的方法是仅对当前图层进行动画处理。因此，当您想要淡入下一层时，您可以：
1. 将当前图层的 z-index 设置为较高的数字（例如 3）
2. 将下一层的 z-index 设置为较小的数字（例如 2）并将不透明度设置为 1
3. 仅淡出当前图层，这将显示下面的下一个图层。
4. 在当前图层动画上设置回调函数，将 z 索引重置为正确的值，以免扰乱下一个过渡。

因此，根据我的最后一个建议，我建议：

// accomodate your other issue
var $nextObj = $(this.slides).eq(index).css({zIndex:900, opacity:1});
$(currentObj).css({zIndex:1000}).stop().animate( {opacity:0}, {duration: this.settings.duration, easing:this.settings.easing}, function(){ $(this).css({zIndex: 1}); $nextObj.css({zIndex: 2}); );

这有意义吗？

Answer 2

似乎没有一个网站可以让这个脚本演示或公开 api（似乎没有任何 api），所以这是在黑暗中拍摄......您应该能够用这两行更改第 277 行：

$(currentObj).css({zIndex:2});
$(this.slides).eq(index).css({zIndex:3}).stop().animate( {opacity:1}, {duration: this.settings.duration, easing:this.settings.easing} );

这里的想法是，在动画开始之前，您只需设置视频的正确 zIndex 即可。

同样，这是在黑暗中拍摄的，因为我假设“currentObj”是当前显示的对象，而“$(this.slides).eq(index)”是下面的下一个对象。