8

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.

Ron
  • 3,975
  • 17
  • 80
  • 130
  • Could you perhaps provide a fiddle on http://jsfiddle.net/? – pimvdb Jul 19 '11 at 17:32
  • Edited my post with link to fiddle. – Ron Jul 19 '11 at 17:46
  • Thanks. It seems like it's not jQuery because using a fixed opacity of e.g. `0.7` also causes it to shine through. – pimvdb Jul 19 '11 at 17:51
  • 2
    I don't know why that's happening, I did re-organize your jsfiddle though so its not all in the HTML box http://jsfiddle.net/mazlix/4vUc7/1/ – mazlix Jul 19 '11 at 18:02
  • 4
    Possible explanation: http://stackoverflow.com/questions/2837057/what-has-bigger-priority-opacity-or-z-index-in-browsers – jk. Jul 19 '11 at 18:40

2 Answers2

6

You were missing a semicolon in your z-index

Here is the updated fiddle

vinceh
  • 3,490
  • 1
  • 21
  • 24
  • It did solve my problem but the real question is why I had to use z-index in first place? jquery .animate({opacity:0}) changes the z-index of the element. Btw the missing semicolon is a stupid mistake :| – Ron Jul 19 '11 at 19:00
1

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/.

Community
  • 1
  • 1
Radu
  • 8,561
  • 8
  • 55
  • 91