autoAlpha and display properties

[frankrue 0 Likes (Newbie)]

Excellent work on this new JS library...

 

I am using this implementation in a new project, and I have two DIV layers: one layer, first in the z-index, is a set of images that will show on the home page and have interactive buttons in them for clicking. The second layer contains a sort-of introduction set of images. These images fade in (using the fancy TweenMax implementation), and, after a time, disappear. I am using the “autoAlpha” property.

 

Unfortunately, when the autoAlpha sets visibility to hidden, the DIV is still picking up my mouse interaction instead of allowing it to flow beneath to the buttons on the first DIV layer. Normally, I would use the “fadeOut” in jQuery, which, upon opacity reaching 0, sets the “display” property to “none”, which TRULY allows interaction with layers below.

 

Am I doing something incorrectly, or is this a limitation in the autoAlpha property? Because in Flash AS3, that autoAlpha property really saves me an extra step in code of having to shut of visibility, but, it seems, in JS, that visibility property doesn’t prevent the element from being in the way.

 

Thoughts?

[GreenSock 8,117 Likes (Superhero)]

Any chance you could post a simple example? Setting visibility to "hidden" is supposed to do EXACTLY the same thing as display="none" except that it doesn't remove it from the flow of the document. In my tests, I couldn't click on something that had its visibility set to hidden. I'd be curious to see your example though.

[Randall 39 Likes (Newbie)]

There's sort of a workaround, though it is quite ugly, where you set the CSS properties for mouse/pointer events to none at the end of the tween. There's probably a better way to achieve that with 100% reliability though so you don't have to keep track of the pointer/mouse state of the element.

[danehansen 5 Likes (Newbie)]

i've come across the exact same problem here, and i will post souce. in my source you will see that i had to do the exact same display:none workaround to get my lightbox to stop absorbing all the mouse events.

bin.zip