Question

我正在尝试使用jquery切换创建隐藏菜单。我有一个带有点击事件的按钮和一个带有切换事件的课程菜单。我想在菜单上进行CSS转换，或者要显示效果。

我有一个侧边栏，我希望菜单从左到右显示过渡效果或其他内容。

$('.menu__btn').click(function(){
  $('.menu').toggle();
})

.menu {
  background: #000;
  width: 240px;
  height: 100%;
  position:fixed;
  margin-left: 100px;
  display: none
  -webkit-box-shadow: inset 1px 0px 1px 0px rgba(232,232,232,1);
  -moz-box-shadow: inset 1px 0px 1px 0px rgba(232,232,232,1);
  box-shadow: inset 1px 0px 1px 0px rgba(232,232,232,1);
}

.menu__container {
  padding: 85px 10px 10px 10px;
  position: relative;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="menu__btn">
  <button class="menu__icon">Button</button>
</div>
<div class="menu">
  <div class="menu__container">
    Some content
  </div>
</div>

提前致谢

Answer 1

如果我理解正确，您需要从左到右设置菜单动画。

您可以在菜单上切换类并添加一些过渡和样式。 toggle()从display:none更改为display:block，这是一个无法动画的属性。

使用toggleClass()来......井......切换：）/更改menu上的类并设置这些类的样式。

因此，请使用left:-100%和left:200px（如果您想要定位菜单的位置）以及转换或不透明度。

见下文

$('.menu__btn').click(function(){
  $('.menu').toggleClass('show-menu');
})

.menu{
  background: #000;
  width: 240px;
  height: 100%;
  position:fixed;
  left:-100%;
 
  -webkit-box-shadow: inset 1px 0px 1px 0px rgba(232,232,232,1);
  -moz-box-shadow: inset 1px 0px 1px 0px rgba(232,232,232,1);
  box-shadow: inset 1px 0px 1px 0px rgba(232,232,232,1);
  transition:1s ease-out;
  opacity:0;
}
.menu__container {
  padding: 85px 10px 10px 10px;
  position: relative;
  }
  .show-menu {
     left:200px;
     opacity:1;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menu__btn">
 <button class="menu__icon">Button</button>
</div>
<div class="menu">
   <div class="menu__container">
    Some content
   </div>
 </div>

切换jquery的过渡效果

1 个答案: