javascript - JQuery 动画无法正常工作

Question

我正在尝试制作一个带有侧边栏和设置等的网站，我希望侧边栏滑出并且内容应该调整大小。我试图让它看起来像一个干净的动画。虽然当我尝试时，内容只是滑到侧边栏下方。我不知道为什么。这是我的代码。

链接

    <!-- Latest Bootstrap V4 -->
    <link rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css">

    <!-- Font Awesome V4 -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

    <!-- JQuery V2.1.4 -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>

    <!-- Bootstrap V4 Javascript -->
    <script src="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/js/bootstrap.js"></script>

HTML

<div class="row all">
    <div id="infobox" class="col-md-4">
        test
    </div>
    <div id="content" class="col-md-8">
        <nav id="bar">
            <i class="fa fa-bars" id="info" title="Info"></i><div id="title" class="text-center">test</div>
        </nav>
        <div id="chat">
            t
        </div>
        <div id="input">
            <input type="text" class="form-control" id="text" placeholder="Enter chat here">
            <button type="button" class="btn btn-success" id="send">Send</button>
        </div>
    </div>
</div>

CSS

html, body{
    height: 100%;
    width: 100%;
}

.ui-effects-wrapper{
    float: right;
}

#text, #send{
    border-radius: 0px;
    float: left;
}
#text{
    width: 90%
}
#send{
    width: 10%;
}

#bar{
    background-color: #F0F0F0;
    padding: .5rem 1rem;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    color: #373a3c;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    display: inline;
}
#bar #title{
    color: rgba(0,0,0,.8);
    font-size: 1.25rem;
    padding-top: .25rem;
    padding-bottom: .25rem;
    text-decoration: none;
    text-align: center;
    display: inline;
    margin-left: 45%;
    margin-right: 45%;
}

#chat{
    position: absolute;
    top: 8%;
    bottom: 5%;
    left: 0%;
    right: 0%;
    overflow: auto;
    min-height: 87%;
}

#input{
    position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
    // min-height: 5%;
}

#content{
    position: relative;
    height: 100%;
    float: left;
    /*width: auto;*/
}

#infobox{
    background-color: #D9D9D9;
    /*position: relative;*/
    height: 100%;
}
.all{
    height: 100%;
    width: 100%;
    margin: 0;
}

Javascript

$(function () {
    $("#send").click(function () {
        alert("test");
        $("#chat").html(document.getElementById("text").value);
        document.getElementById("text").value = "";
        return false;
    });
    $("#info").click(function () {
        if($("#infobox").is(":visible")){
        $("#infobox").hide("slide", { direction: "left" }, 1000);
        $("#content").animate({
            width: "100%",
            float: "left"
        }, 1000, "", function () {
//            alert("all done");
        });
    }else{
        $("#content").animate({
            width: "66.666667%",
            float: "left"
        }, 1000, "", function () {
//            alert("all done");
        });
        $("#infobox").show("slide", { direction: "left" }, 1000);

    }
    });
});

示例:http://jsbin.com/zivuzipoju/

Answer 1

多亏了 Rudy Setiady，我才知道该怎么做，然后我被难住了，因为出于某种奇怪的原因，有某种填充或 chrome 无法找到的东西。所以我只是将初始宽度设置为 150%，这样它看起来就像全屏一样。然后当侧边栏出来的时候，我会把它设置为100%。当我这样做时，当然会有一个滚动条。所以为了解决这个问题，我只是在 body 上设置了 overflow: hidden。