jquery - 如何让我的按钮随着我的 .animate 宽度扩展而移动？

Question

我有两个 div，一个设置为在另一个上激事件画。一个按钮 div 和一个内容 div。

动画有效，但内容在播放时覆盖了按钮。如何使 div(按钮)在动画前后的右侧间隔相同的距离？本质上，随着邻居向右扩展而向右移动？我确定这是一个 CSS 问题，但我是新手，所以不确定。

JQ:

$(document).ready(function() {
    $(".about").click(function() {
        $(".aboutContent").animate({ width: "toggle"},"350");
    });
});  

HTML:

<div class="container">
    <div class="about"></div>
    <div class="aboutContent"></div>
</div>

CSS:

.container {
    position:absolute;
    width:940px;
    height:450px;
    top:0px;
    left:0px;
    z-index:1;
}
.about { 
    margin-left:10px;
    width:30px;
    border:dashed 1px #C1C1C1;
    cursor:pointer;
    z-index:2;
}
.aboutContent  {
    position:absolute;
    left:0px;
    top:-1px;
    width:900px;
    height:450px;
    display:none;
    z-index:2;
}

Answer 1

我使用了 toggle() 函数和一些特定的 CSS 和动画调整来重现您想要的效果(基于演示目的的 300px 扩展，但您可以轻松地将其更改为 900px如您所愿):

$(".about").toggle(function() {
    $(".aboutContent").css({
        display: 'block',
        width: '0'
    }).animate({
        display: "block",
        width: 300
    });
    $(".about").animate({
        "margin-left": "+=300"
    });
}, function() {
    $(".aboutContent").animate({
        width: 0
    }, function() {
        $(this).hide()
    });
    $(".about").animate({
        "margin-left": "-=300"
    });
});

See demo →