Jump to content


autoAlpha and display properties

Recommended Posts

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.


Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • 1 month later...

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.


Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.