Spry-ied div still on top of other elements even when faded-out

Question

i have a <div> with applied Spry.Effects.Fade, so when
i click a button, the <div> shows up, when i click the button
again, the <div> "disappears" thru fade.
the problem is that the <div> is just "hidden", meaning
it's still on top of the other elements on the page. for example i
have a link in the page, i can't click on the link because the
browser thinks im still clicking on the <div> on top of the
link even tho the <div> is hidden.
how do i solve this problem?
thanks!

Answer 1

I've also ran into the same issue. Funny that the Slide
effect does not exhibit this, what I would call an oversight.
Here's how I got around it. Seems like something that should
be updated in the Fade effect iteself.
<script type="text/javascript">
var slide_box5 = new Spry.Effect.Fade('box5', {duration:
400, from: '0%', to: '100%', toggle:true});
var myObserver5 = new Object();
myObserver5.onPreEffect = function(eff, data)
if (typeof this.box == 'undefined')
this.box = document.getElementById(data.element.id);
myObserver5.onStep = function(eff, data)
if (eff.direction == 1)
this.box.style.display = 'block';
this.box.style.visibility = 'visible';
myObserver5.onPostEffect = function(eff, data)
if (eff.direction == 2)
this.box.style.display = 'none';
this.box.style.visibility = 'hidden';
slide_box5.addObserver(myObserver5);
</script>