Plugin - Google Chrome: css("zIndex") not being set
Hello,
I am a big fan of jQuery, and this is my first post EVER, so big cheers for me.
I have developed lots of plugins, but I noticed that on my latest one, there is a problem with the animation in starting/stopping in Google Chrome (and I suspect other webkit too).
The plugin is of a menu type, and the animation is of one element sliding out from underneath it's previous sibling, to achieve this I first set the element to the position of it's previous sibling, set zIndex to -1 of previous, and unbind it's mouse events, I then animate it to it's new position, and bind the mouse event's on animation callback.
ZIndex isn't being set at all in Chrome, so maybe the next element is being displayed on top of the previous, thus triggering mouseleave on the previous?
Here is a link to the demo part of my website http://www.luketobrien.com/lui/BoxMenu.php so you can see what I'm taking about, but if you are using FF or IE, the chances are it will function as intended.
The code is very long, so I won't post it here, instead I have uploaded it to the server http://www.luketobrien.com/BoxMenu.js
Fuction showElement (right at the end) is where the animation happens, and the ZIndex is being set right at the beginning of that function with the code (where pre is the previous element):
- .css({zIndex : pre.css("zIndex") - 1});
Any ideas as to why this code is not setting the style in Chrome?
Thanks,
Luke