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;
}

如何使用我的.animate宽度扩展来移动按钮？

2 个答案: