淡化效果和叠加框

时间:2011-10-05 22:36:27

标签: jquery html css

我正在使用fadeIn / fadeOut效果来定期更改标题图像。这没关系,但是当我在此图像上有一个框(下拉菜单覆盖标题图像)时,在淡入淡出动画期间,重叠的框会消失并返回fadeIn。覆盖的盒子绝对定位并放置在头部外面。有谁知道这是否可以解决?

2 个答案:

答案 0 :(得分:1)

编辑 既然您已经提供了所看到的视频(但仍然没有HTML / CSS),我的下一个猜测就是你有一个z-index问题,其中菜单并不总是具有比两个衰落更高的z-index。我建议在菜单上设置/提高z-index,以确保它位于任何其他页面对象之上。


由于您尚未提供HTML,因此可以猜测可能会发生什么。

fadeOut()动画完成时,它会将对象设置为display: none,从而将其从页面布局中删除。如果这是定义您的盒子大小的,那么盒子的大小将会改变。

所以,你可能需要做的就是动画,而不是每次都做display: none。这可以通过多种方式完成。一种简单的方法是使用.fadeTo()代替.fadeIn().fadeOut()。您可以使用它将不透明度设置为0或1,但对象仍将保留在页面中,因此您的布局不会受到影响。

你可以在这里看到一个如何运作的例子:

http://jsfiddle.net/jfriend00/UufNc/

如果这不是你试图解决的问题,那么请包含相关的HTML和javascript,以便我们可以看到你真正想要做的事情。

答案 1 :(得分:0)

我今天解决了。我不确切知道问题出在哪里,因为我完全重写了这部分的html和css代码。可能是z-index和绝对定位元素的混合物。我确信菜单的一部分在横幅容器之外并且有最高的z-index但在这种情况下可能有某种魔法:)