0
Итак, я делаю меню в левой части экрана, которое скользит, когда вы нажимаете его, и он отлично работает, анимация правильная, когда я пытаюсь анимировать div с классом. bd (я использую это как тело страницы), он не оживляет. Он движется правильно, но он крут и понятия не имеет, почему он это делает, я включил codepen, и я также включу фрагмент кода, который дает мне тот же результат в обоих из них.Левое боковое меню сменяется правильно, но корпус не сдвинется
$(document).ready(function(){
\t $('.opener').click(function(){
\t \t function name(){
\t \t \t if($('.bd').css('margin-left') == ($('body').width()*25)/100+'px'){
\t \t \t \t $('.bd').css({
\t \t \t \t \t 'animation-name':'expandbody',
\t \t \t \t \t 'anmation-duration':'2s',
\t \t \t \t \t 'margin-left':'0',
\t \t \t \t \t 'width':'100%'
\t \t \t \t });
\t \t \t \t $('.menu').css({
\t \t \t \t \t 'animation-name':'closemenu',
\t \t \t \t \t 'animation-duration':'1s',
\t \t \t \t \t 'width':'0%',
\t \t \t \t \t 'display':'none'
\t \t \t \t });
\t \t \t }else{
\t \t \t \t $('.bd').css({
\t \t \t \t \t 'animation-name':'smallerbody',
\t \t \t \t \t 'anmation-duration':'2s',
\t \t \t \t \t 'margin-left':'25%',
\t \t \t \t \t 'width':'75%'
\t \t \t \t });
\t \t \t \t $('.menu').css({
\t \t \t \t \t 'animation-name':'expandmenu',
\t \t \t \t \t 'animation-duration':'1s',
\t \t \t \t \t 'width':'25%',
\t \t \t \t \t 'display':'block'
\t \t \t \t });
\t \t \t }
\t \t }
\t \t name();
\t });
});html,body{
\t margin:0;
\t padding:0;
\t width:100%;
\t height:100%;
}
.menu{
\t width:25%;
\t height:100%;
\t position:fixed;
\t background-color:#0A0A0A;
\t display:none;
}
.menu ul{
\t padding:0;
\t margin:0;
}
.menu ul li{
\t margin:0;
\t padding:0;
\t width:100%;
\t border-bottom:1px solid #F0F0F0;
\t height:50px;
\t line-height:50px;
}
.menu ul li a{
\t display:block;
\t margin:0;
\t padding:0;
\t width:100%;
\t color:#F0F0F0;
\t text-decoration:none;
\t font-size:1.5em;
\t font-family:Arial;
\t font-weight:bold;
\t transition:all .5s;
}
.fa{
\t width:25px;
\t margin-left:10px;
\t margin-right:25px;
}
.caret{
\t float:right;
\t display:block;
\t width:0px;
\t height:0px;
\t border-top:10px solid transparent;
\t border-right:10px solid transparent;
\t border-bottom:10px solid transparent;
\t border-left:10px solid #F0F0F0;
\t position:relative;
\t top:13px;
\t display:none;
}
.menu ul li:hover{
\t background-color:#1A1A1A;
}
.menu ul li:hover a>.caret{
\t display:block;
}
.bar{
\t position:fixed;
\t margin:0;
\t padding:0;
\t top:0;
\t width:100%;
\t height:50px;
\t background:#0A0A0A;
\t color:#A0A0A0;
}
.opener{
\t line-height:40px;
\t font-size:2em;
\t margin-left:25px;
\t padding-left:6px;
\t padding-right:6px;
\t margin-top:5px;
\t margin-bottom:5px;
\t max-width:30px;
\t cursor:pointer;
\t font-weight:bold;
\t transition:all .5s;
}
.opener:hover{
\t color:#F0F0F0;
}
.bd{
\t width:100%;
\t height:100%;
\t background-color:#F0F0F0;
}
/* Animations*/
@keyframes expandmenu{
\t from{
\t \t width:0%;
\t \t display:none;
\t }
\t to{
\t \t width:25%;
\t \t display:block;
\t }
}
@keyframes closemenu{
\t from{
\t \t width:25%;
\t \t display:block;
\t }
\t to{
\t \t width:0%;
\t \t display:none;
\t }
}
@keyframes expandbody{
\t from{
\t \t width:75%;
\t \t margin-left:25%;
\t }
\t to{
\t \t width:100%;
\t \t margin-left:0%;
\t }
}
@keyframes smallerbody{
\t from{
\t \t width:100%;
\t \t margin-left:0%;
\t }
\t to{
\t \t width:75%;
\t \t margin-left:25%;
\t }
}<head>
\t <title>Queltick | Admin Dashboard</title>
\t <link href="css/style.css" rel="stylesheet" type="text/css">
\t <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
\t <script
src="http://code.jquery.com/jquery-3.1.1.js"
integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA="
crossorigin="anonymous"></script>
</head>
<body>
<div class="menu">
<ul>
\t <li><a class="menuitem" href="#"><span class="fa fa-home"></span>Home <span class="caret"></span></a></li>
\t <li><a class="menuitem" href="#"><span class="fa fa-user"></span>Users <span class="caret"></span></a></li>
\t <li><a class="menuitem" href="#"><span class="fa fa-book"></span>Posts <span class="caret"></span></a></li>
\t <li><a class="menuitem" href="#"><span class="fa fa-users"></span>Groups <span class="caret"></span></a></li>
</ul>
</div>
<div class="bd">
\t <div class="bar">
\t \t <div class="opener">
\t \t ☰
\t \t </div>
\t \t <div class="logo"></div>
\t </div>
</div>
</body>EDIT:
Я изменил ($(window).width()*25)/100+'px' к ($('body').width()*25)/100+'px', чтобы сделать его более отзывчивым
он отлично работает на моего чувака. Я добавил несколько кусков h1-тегов для заполнения в вашем .bd-содержимом прямо перед последним div, и он полностью их подталкивает, что кажется точной проблемой. – muratkh
тело надавлено правильно для меня, но толчок не анимируется по какой-то причине –