[英]JQuery Animation not working Properly
我正在尝试使网站的侧边栏具有设置等内容,并且我希望侧边栏可以滑出并且内容应重新调整大小。 我正在尝试使其看起来像一个干净的动画。 虽然当我尝试时,内容只是在侧边栏下方滑动。 我不知道为什么。 这是我的代码。
链接
<!-- 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;
}
Java脚本
$(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/
多亏了Rudy Setiady,我才知道该怎么做,然后我很沮丧,因为有些奇怪的原因,有些填充物或铬无法找到。 因此,我只是将初始宽度设置为150%,以使其看起来像是全屏显示。 然后,当侧边栏出现时,我会将其设置为100%。 当我这样做时,当然会有一个滚动条。 因此,为了解决这个问题,我只设置了overflow: hidden
在主体上。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.