On the following page  http://www.pgscapital.at/thurn/projects/hoerndlwaldgasse/index.html, I am trying to animate two black divs with the text content VORHER over two different pngs.

The exact build up is. A PNG linked to a shadow box gallery, over that a Black DIV with opacity 70 and over that a transparent gif which when hovered over should trigger the fade in or out of the black div with the content vorher. I will not get into the story why it was buildup like that. 

At start the black div should fade in. When i hover over it, actually the transparent gif over it, the black div should disappear again allowing the click on the png linked to the shadowbox gallery. This all works fine as long as I enter the image from the top or the left or the right. If I hover over the image from the bottom, the animation is duplicated and not doing what it should. The same when the mouseleaves the image from the bottom.

I think or lets say what firebug is showing me is that the actual link exists twice as a the transparent gif and as a link with no content resting at the bottom of the actual link container. 

Is there anyway to define a time period in witch when the hover action or the mouseleave action is allowed to trigger the animation or if to short of a time period the following animation will not be trigger.

For example two hovers in the timer period of 3 seconds don't animate. I'd also be happy for any other solution, hints or found mistakes that might even address my html. 

Regards and Thanks a lot, i am really stuck on this one !

<script type="text/javascript">

$(document).ready(function(){

    $("div.vorherhoern").fadeIn(3000);

  $('#vorherhoernlink1,#vorherhoernlink2').hover(function() {

$("div.vorherhoern").fadeOut(600);

});

  $('#vorherhoernlink1,#vorherhoernlink2').mouseout(function() {

$("div.vorherhoern").fadeIn(600);

});

});

</script>