如何让我的按钮随着.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 →

Answer 2

更改您的HTML和CSS以下。不需要改变你的jQuery。

演示：http://jsfiddle.net/NWZKN/

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

 
.about { 
    border:dashed 1px #C1C1C1; 
    cursor:pointer; 
} 
.aboutContent { 
    float: left; 
    display: none; 
}