Fade effect and overlayed box

I am using fadeIn/fadeOut effect to periodically change header images. This is ok but when I have a box (drop down menu which overlays the header image) over this image, during fade animation the overlayed box disappears and comes back with fadeIn. Overlayed box is absolutely positioned and is placed outside of 开发者_如何学Pythonthe header. Does anybody knows if this can be fixed?

Edit: Now that you've provided a video of what you're seeing (but still no HTML/CSS), my next guess is that you have a z-index issue where the menu doesn't always have a higher z-index than the two things fading. I would suggest setting/raising the z-index on the menu to make sure it's on top of any other page objects.

Since you haven't provided HTML, here's a guess at what may be going on.

When the fadeOut() animation completes, it sets the object to display: none, thus removing it from the layout of the page. If this is what was defining the size of your box, then the size of the box will change.

So, what you probably need to do is to animate without every doing to display: none. This can be done multiple ways. One easy way is to use .fadeTo() instead of .fadeIn() and .fadeOut(). You can use this to animate the opacity to 0 or to 1, but the object will still stay in the page and thus your layout will not be affected.

You can see an example of how this works here:

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

If this isn't the problem you were trying to solve, then please include the relevant HTML and javascript so we can see what you're really trying to do.

I solved it today. I don't know exactly where was the problem because I completely rewrote the html and css code for this part. Probably it was some mixture of z-index and absolutely positioned elements. I was sure that the part of the menu was outside of the banner container and there was the highest z-index but there is probably some kind of magic in this case :)