左侧菜单正确滑动但身体没有滑动

时间：2017-02-09 19:25:28

标签： javascript jquery html css css3

因此，当我点击它时，我正在制作一个滑入的左侧菜单，并且当我尝试使用类.bd设置div的动画时，它正常工作正常（我正在使用它作为主体页面）它没有动画。它移动正确，但它是突然的，不知道它为什么这样做，我包括一个codepen，我还将包含一个代码片段，它给我两个相同的结果。

$(document).ready(function(){
	$('.opener').click(function(){
		function name(){
			if($('.bd').css('margin-left') == ($('body').width()*25)/100+'px'){
				$('.bd').css({
					'animation-name':'expandbody',
					'anmation-duration':'2s',
					'margin-left':'0',
					'width':'100%'
				});
				$('.menu').css({
					'animation-name':'closemenu',
					'animation-duration':'1s',
					'width':'0%',
					'display':'none'
				});
			}else{
				$('.bd').css({
					'animation-name':'smallerbody',
					'anmation-duration':'2s',
					'margin-left':'25%',
					'width':'75%'
				});
				$('.menu').css({
					'animation-name':'expandmenu',
					'animation-duration':'1s',
					'width':'25%',
					'display':'block'
				});
			}
		}
		name();
	});
});
html,body{
	margin:0;
	padding:0;
	width:100%;
	height:100%;
}
.menu{
	width:25%;
	height:100%;
	position:fixed;
	background-color:#0A0A0A;
	display:none;
}
.menu ul{
	padding:0;
	margin:0;
}
.menu ul li{
	margin:0;
	padding:0;
	width:100%;
	border-bottom:1px solid #F0F0F0;
	height:50px;
	line-height:50px;
}
.menu ul li a{
	display:block;
	margin:0;
	padding:0;
	width:100%;
	color:#F0F0F0;
	text-decoration:none;
	font-size:1.5em;
	font-family:Arial;
	font-weight:bold;
	transition:all .5s;
}
.fa{
	width:25px;
	margin-left:10px;
	margin-right:25px;
}
.caret{
	float:right;
	display:block;
	width:0px;
	height:0px;
	border-top:10px solid transparent;
	border-right:10px solid transparent;
	border-bottom:10px solid transparent;
	border-left:10px solid #F0F0F0;
	position:relative;
	top:13px;
	display:none;
}
.menu ul li:hover{
	background-color:#1A1A1A;
}
.menu ul li:hover a>.caret{
	display:block;
}
.bar{
	position:fixed;
	margin:0;
	padding:0;
	top:0;
	width:100%;
	height:50px;
	background:#0A0A0A;
	color:#A0A0A0;
}
.opener{
	line-height:40px;
	font-size:2em;
	margin-left:25px;
	padding-left:6px;
	padding-right:6px;
	margin-top:5px;
	margin-bottom:5px;
	max-width:30px;
	cursor:pointer;
	font-weight:bold;
	transition:all .5s;
}
.opener:hover{
	color:#F0F0F0;
}
.bd{
	width:100%;
	height:100%;
	background-color:#F0F0F0;
}

/* Animations*/

@keyframes expandmenu{
	from{
		width:0%;
		display:none;
	}
	to{
		width:25%;
		display:block;
	}
}
@keyframes closemenu{
	from{
		width:25%;
		display:block;
	}
	to{
		width:0%;
		display:none;
	}
}
@keyframes expandbody{
	from{
		width:75%;
		margin-left:25%;
	}
	to{
		width:100%;
		margin-left:0%;
	}
}
@keyframes smallerbody{
	from{
		width:100%;
		margin-left:0%;
	}
	to{
		width:75%;
		margin-left:25%;

	}
}
<head>
	<title>Queltick | Admin Dashboard</title>
	<link href="css/style.css" rel="stylesheet" type="text/css">
	<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
	<script
  src="http://code.jquery.com/jquery-3.1.1.js"
  integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA="
  crossorigin="anonymous"></script>
</head>
<body>
<div class="menu">
<ul>
	<li><a class="menuitem" href="#"><span class="fa fa-home"></span>Home <span class="caret"></span></a></li>
	<li><a class="menuitem" href="#"><span class="fa fa-user"></span>Users <span class="caret"></span></a></li>
	<li><a class="menuitem" href="#"><span class="fa fa-book"></span>Posts <span class="caret"></span></a></li>
	<li><a class="menuitem" href="#"><span class="fa fa-users"></span>Groups <span class="caret"></span></a></li>
</ul>
</div>
<div class="bd">
	<div class="bar">

		<div class="opener">
		&#9776;
		</div>

		<div class="logo"></div>

	</div>

</div>
</body>

编辑：
我将($(window).width()*25)/100+'px'更改为($('body').width()*25)/100+'px'以使其更具响应性

3 个答案:

答案 0 :(得分：2)

在你的情况下，第7行和第20行是两个小的拼写错误'anmation-duration'应该是'animation-duration'

$(document).ready(function() {
  $('.opener').click(function() {
    function name() {
      if ($('.bd').css('margin-left') >= ($('body').width() * 25) / 100 + 'px') {
        $('.bd').css({
          'animation-name': 'expandbody',
          'animation-duration': '2s',
          'margin-left': '0',
          'width': '100%'
        });
        $('.menu').css({
          'animation-name': 'closemenu',
          'animation-duration': '1s',
          'width': '0%',
          'display': 'none'
        });
      } else {
        $('.bd').css({
          'animation-name': 'smallerbody',
          'animation-duration': '2s',
          'margin-left': '25%',
          'width': '75%'
        });
        $('.menu').css({
          'animation-name': 'expandmenu',
          'animation-duration': '1s',
          'width': '25%',
          'display': 'block'
        });
      }
    }
    name();
  });
});
html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}
.menu {
  width: 25%;
  height: 100%;
  position: fixed;
  background-color: #0A0A0A;
  display: none;
}
.menu ul {
  padding: 0;
  margin: 0;
}
.menu ul li {
  margin: 0;
  padding: 0;
  width: 100%;
  border-bottom: 1px solid #F0F0F0;
  height: 50px;
  line-height: 50px;
}
.menu ul li a {
  display: block;
  margin: 0;
  padding: 0;
  width: 100%;
  color: #F0F0F0;
  text-decoration: none;
  font-size: 1.5em;
  font-family: Arial;
  font-weight: bold;
  transition: all .5s;
}
.fa {
  width: 25px;
  margin-left: 10px;
  margin-right: 25px;
}
.caret {
  float: right;
  display: block;
  width: 0px;
  height: 0px;
  border-top: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 10px solid #F0F0F0;
  position: relative;
  top: 13px;
  display: none;
}
.menu ul li:hover {
  background-color: #1A1A1A;
}
.menu ul li:hover a>.caret {
  display: block;
}
.bar {
  position: fixed;
  margin: 0;
  padding: 0;
  top: 0;
  width: 100%;
  height: 50px;
  background: #0A0A0A;
  color: #A0A0A0;
}
.opener {
  line-height: 40px;
  font-size: 2em;
  margin-left: 25px;
  padding-left: 6px;
  padding-right: 6px;
  margin-top: 5px;
  margin-bottom: 5px;
  max-width: 30px;
  cursor: pointer;
  font-weight: bold;
  transition: all .5s;
}
.opener:hover {
  color: #F0F0F0;
}
.bd {
  width: 100%;
  height: 100%;
  background-color: #F0F0F0;
}
/* Animations*/

@keyframes expandmenu {
  from {
    width: 0%;
    display: none;
  }
  to {
    width: 25%;
    display: block;
  }
}
@keyframes closemenu {
  from {
    width: 25%;
    display: block;
  }
  to {
    width: 0%;
    display: none;
  }
}
@keyframes expandbody {
  from {
    width: 75%;
    margin-left: 25%;
  }
  to {
    width: 100%;
    margin-left: 0%;
  }
}
@keyframes smallerbody {
  from {
    width: 100%;
    margin-left: 0%;
  }
  to {
    width: 75%;
    margin-left: 25%;
  }
}
<head>
  <title>Queltick | Admin Dashboard</title>
  <link href="css/style.css" rel="stylesheet" type="text/css">
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
  <script src="http://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script>
</head>

<body>
  <div class="menu">
    <ul>
      <li><a class="menuitem" href="#"><span class="fa fa-home"></span>Home <span class="caret"></span></a>
      </li>
      <li><a class="menuitem" href="#"><span class="fa fa-user"></span>Users <span class="caret"></span></a>
      </li>
      <li><a class="menuitem" href="#"><span class="fa fa-book"></span>Posts <span class="caret"></span></a>
      </li>
      <li><a class="menuitem" href="#"><span class="fa fa-users"></span>Groups <span class="caret"></span></a>
      </li>
    </ul>
  </div>
  <div class="bd">
    <div class="bar">

      <div class="opener">
        &#9776;
      </div>

      <div class="logo"></div>

    </div>

  </div>
</body>

答案 1 :(得分：0)

我将动画名称和动画持续时间更改为动画并将它们放在一起。我认为动画名称不是正确的方式。它工作了

class CMyClass {};

template<class T>
void func(T&& param) {
        if (std::is_same<CMyClass, std::decay<T>::type>::value)
            std::cout << "param is a CMyClass\n";
        if (std::is_same<T, CMyClass&>::value)
            std::cout << "param is a CMyClass reference\n";
        else if (std::is_same<T, CMyClass&&>::value)
            std::cout << "param is a CMyClass r-value reference\n";
        else if (std::is_same<T, const CMyClass&>::value)
            std::cout << "param is a const CMyClass reference\n";
        else if (std::is_same<T, const CMyClass&&>::value)
            std::cout << "param is a const CMyClass r-value reference\n";
        else if (std::is_same<T, const CMyClass>::value)
            std::cout << "param is a constant CMyClass\n";
        else if (std::is_same<T, CMyClass>::value)
            std::cout << "param is a CMyClass\n";
        else
            std::cout << "param is not a CMyClass\n";
}


CMyClass mc3;
func(std::move(mc3));

答案 2 :(得分：0)

对于任何有兴趣我修理的人 这是修复：

＆＃13;
＆＃13; 
$(document).ready(function(){
	$('.opener').click(function(){
		function name(){
			if($('.bd').css('margin-left') == ($(window).width()*25)/100+'px'){
				$('.bd').css({
					'animation-name':'expandbody',
					'animation-duration':'1s',
					'margin-left':'0',
					'width':'100%'
				});
				$('.menu').css({
					'animation':'closemenu 1s',
					'margin-left':'-25%'
				});
			}else{
				$('.bd').css({
					'animation-name':'smallerbody',
					'animation-duration':'1s',
					'margin-left':'25%',
					'width':'75%'
				});
				$('.menu').css({
					'animation-name':'expandmenu',
					'animation-duration':'1s',
					'margin-left':'0%',
					'display':'block'
				});
			}
		}
		name();
	});
});
＆＃13; 
html,body{
	margin:0;
	padding:0;
	width:100%;
	height:100%;
}
.menu{
	width:25%;
	height:100%;
	position:fixed;
	background-color:#0A0A0A;
	margin-left:-25%;
-webkit-box-shadow: inset -2px 2px 10px -3px rgba(240,240,240,1);
-moz-box-shadow: inset -2px 2px 10px -3px rgba(240,240,240,1);
box-shadow: inset -2px 2px 10px -3px rgba(240,240,240,1);
}
.menu-title{
	height:50px;
	line-height:50px;
	font-size:1.7em;
	font-family:Arial;
	color:#F0F0F0;
	width:calc(100% - 5px);
	padding-left:5px;
	border-bottom:2px solid #F0F0F0;
}
.menu ul{
	padding:0;
	margin:0;
}
.menu ul li{
	margin:0;
	padding:0;
	width:100%;
	border-bottom:1px solid #F0F0F0;
	height:50px;
	line-height:50px;
}
.menu ul li a{
	display:block;
	margin:0;
	padding:0;
	width:100%;
	color:#F0F0F0;
	text-decoration:none;
	font-size:1.5em;
	font-family:Arial;
	font-weight:bold;
	transition:all .5s;
}
.fa{
	width:25px;
	margin-left:25px;
	margin-right:25px;
}
.caret{
	float:right;
	display:block;
	width:0px;
	height:0px;
	border-top:10px solid transparent;
	border-right:10px solid transparent;
	border-bottom:10px solid transparent;
	border-left:10px solid #F0F0F0;
	position:relative;
	top:13px;
	display:none;
}
.menu ul li:hover{
	background-color:#1A1A1A;
}
.menu ul li:hover a>.caret{
	display:block;
}
.bar{
	position:fixed;
	margin:0;
	padding:0;
	top:0;
	width:100%;
	height:50px;
	background:#0A0A0A;
	color:#A0A0A0;
}
.opener{
	line-height:40px;
	font-size:2em;
	margin-left:25px;
	padding-left:6px;
	padding-right:6px;
	margin-top:5px;
	margin-bottom:5px;
	max-width:30px;
	cursor:pointer;
	font-weight:bold;
	transition:all .5s;
}
.opener:hover{
	color:#F0F0F0;
}
.bd{
	width:100%;
	height:100%;
	background-color:#1A1A1A;
}

/* Animations*/

@keyframes expandmenu{
	from{
		margin-left:-25%;
	}
	to{
		margin-left:0%;
	}
}
@keyframes closemenu{
	from{
		margin-left:0%;
	}
	to{
		margin-left:-25%;
	}
}
@keyframes expandbody{
	from{
		width:75%;
		margin-left:25%;
	}
	to{
		width:100%;
		margin-left:0%;
	}
}
@keyframes smallerbody{
	from{
		width:100%;
		margin-left:0%;
	}
	to{
		width:75%;
		margin-left:25%;

	}
}
＆＃13; 
<head>
	<title>Queltick | Admin Dashboard</title>
	<link href="css/style.css" rel="stylesheet" type="text/css">
	<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
	<script
  src="http://code.jquery.com/jquery-3.1.1.js"
  integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA="
  crossorigin="anonymous"></script>
</head>
<body>
<div class="menu">
<div class="menu-title">
&#9776; Menu
</div>
<ul>
	<li><a class="menuitem" href="#"><span class="fa fa-home"></span>Home <span class="caret"></span></a></li>
	<li><a class="menuitem" href="#"><span class="fa fa-user"></span>Users <span class="caret"></span></a></li>
	<li><a class="menuitem" href="#"><span class="fa fa-book"></span>Posts <span class="caret"></span></a></li>
	<li><a class="menuitem" href="#"><span class="fa fa-users"></span>Groups <span class="caret"></span></a></li>
</ul>
</div>
<div class="bd">
	<div class="bar">

		<div class="opener">
		&#9776;
		</div>

		<div class="logo"></div>

	</div>

</div>
</body>
</html>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题