CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user359545
user359545

Reputation: 33

JQuery Animation overlay issue

Hello I have an odd problem, I have an animation that opens up over top of a website, however after it is done opening, none of the links that where under the overlay seem to work. I have created a jsfiddle to demonstrate the issue.

Fiddle me this!

    var removeWhenOpen = true; var done = false;
var timer0;
jQuery(document).ready(function() {
    $('#doors').hover(function() {
        jQuery('#door-left').stop().animate({left:-500}, 1500, function() { if (removeWhenOpen) $(this).remove(); done=true; });
        jQuery('#door-right').stop().animate({right:-500}, 1500, function() { if (removeWhenOpen) $(this).remove(); });
        var timer0 = setTimeout(function() {
            jQuery('#ladyonthelake').stop().animate({opacity:0}, 2000);
        }, 5);
    }, function() {
        jQuery('#door-left').stop().animate({left:0}, 250);
        jQuery('#door-right').stop().animate({right:0}, 250);
        if (!done) {
            if (timer0) clearTimeout(timer0);
            jQuery('#ladyonthelake').stop().fadeIn();
        }
    })
});


<div id="doors">
            <img src="http://theitentrepreneurs.com/temp/ladyonthelake.jpg" width="347" height="520" border="0" id="ladyonthelake" />
            <div id="door-left" class="door"><div class="inner"></div><img src="http://theitentrepreneurs.com/temp/doorleft.png" /></div>
            <div id="door-right" class="door"><div class="inner"></div><img src="http://theitentrepreneurs.com/temp/doorright.png" /></div>
        </div>

any help would be greatly appreciated, as always my back is up against the wall on time, so anything anyone can offer would be great!

Thanks Bryan

Upvotes: 0

Views: 232

Answers (2)

Sia
Sia

Reputation: 133

Your problem was that the doors div was not being removed after the animation was completed causing there to be an absolutely positioned element above the links obstructing the clickability.

add this

jQuery('#door-left').stop().animate({left:-500}, 1500, function() { if (removeWhenOpen) $("#doors").remove(); done=true; });

fiddle: http://jsfiddle.net/gravitybox/fFaac/1/

Upvotes: 1

Yifu Wang
Yifu Wang

Reputation: 313

You forgot to remove $('#doors').

Upvotes: 3

Related Questions