Why jQuery .animate({opacity:0}) changes the z-index too

Question

Basically the title says everything - why jQuery .animate({opacity:0}) changes the z-index too?

Do you know how to solve it?

EDIT:
link to example: http://jsfiddle.net/4vUc7/

Thanks.

Answer 1

You were missing a semicolon in your z-index

Here is the updated fiddle

Answer 2

As mentioned in the question linked by jen, this is not a jQuery bug but a browser problem. If you monitor the properties of the element whose opacity is being toggled in a debug console you'll notice that only opacity is being touched. jQuery is not touching the z-index, but the browser renders elements with opacity that isn't equal to 1 differently.

I've made a few extra changes to your code: http://jsfiddle.net/radu/4vUc7/6/.