1

The elements #open and #close dissappear during the animation when they shouldn't be doing that.

Here is the code and under this box is the jsfiddle.

/* CSS */
#web { width:700px; height:600px; background:#ce5a3e}
#dreta { width:200px; height:600px; background:#000; float:right; position:relative }
#open { position:absolute; top:0; left:-50px; display:none; color:#fff; }
#close { position:absolute; top:0; left:-50px; color:#fff; }

<!-- HTML -->
<div id="web">  
    <div id="dreta">
        <a id="close" href="#">Close</a>
        <a id="open" href="#">Open</a>
    </div>
</div>
// JAVASCRIPT
$("#close").click(function() {   

    $("#dreta").animate({width: 0}, {duration: 1000,easing: "easeOutQuint",complete: function() {

        $("#close").fadeOut();
        $("#open").fadeIn();

    } });

});

$("#open").click(function() {

    $("#dreta").animate({width: '200px'}, {duration: 1000, easing: "easeOutQuint", complete: function() {

        $("#close").fadeIn();
        $("#open").fadeOut();

    }});

});

I have tested it in various browsers and they all make it disappear.

Why does that happen and how can I fix it?

Fiddle: http://jsfiddle.net/aaQhF/1/

1 Answer 1

5

The issue is that jQuery sets a default style with overflow:hidden

You just need to add

$("#dreta").animate().css("overflow","visible");

To remove that default behaviour.

http://jsfiddle.net/aaQhF/3/

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.