Question

元素#open和#close会在动画期间消失，因为它们不应该这样做。

这是代码，在这个框下面是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();

    }});

});

我已经在各种浏览器中对它进行了测试，它们都让它消失了。

为什么会发生这种情况，我该如何解决？

小提琴：http://jsfiddle.net/aaQhF/1/

Answer 1

问题是jQuery使用overflow:hidden

设置默认样式

你只需要添加

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

删除该默认行为。

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

在为其父元素设置动画时，相对定位元素会消失

1 个答案: