对切​​换jQuery的过渡效果 [英] Transition effect on toggle jquery

问题描述

我正在尝试使用jquery切换创建隐藏菜单.我有一个带有单击事件的按钮和一个带有切换事件的类菜单.我想在菜单上进行CSS转换，或出现一种效果.

我有一个侧边栏，我希望菜单从左到右以过渡效果或类似的方式出现.

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

  .menu {背景:#000；宽度:240像素；高度:100％;位置:固定；左边距:100px;显示:无-webkit-box-shadow:插入1px 0px 1px 0px rgba(232,232,232,1);-moz-box-shadow:插入1px 0px 1px 0px rgba(232,232,232,1);box-shadow:嵌入1px 0px 1px 0px rgba(232,232,232,1);}.menu__container {填充:85px 10px 10px 10px;职位:相对}  

 < 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">一些内容</div></div>  

预先感谢

解决方案

如果我对您的理解正确，则希望从左到右制作菜单动画.

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

使用 toggleClass()来...好... toggle:)/更改菜单上的类并为这些类设置样式.

因此，请使用 left:-100％和 left:200px (如果要在其中放置菜单)以及过渡效果或不透明效果.

见下文

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

  .menu {背景:#000；宽度:240像素；高度:100％;位置:固定；左:-100％;-webkit-box-shadow:插入1px 0px 1px 0px rgba(232,232,232,1);-moz-box-shadow:插入1px 0px 1px 0px rgba(232,232,232,1);box-shadow:嵌入1px 0px 1px 0px rgba(232,232,232,1);过渡:1s缓解；不透明度:0;}.menu__container {填充:85px 10px 10px 10px;职位:相对}.show-menu {左:200px;不透明度: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">一些内容</div></div>  

I am trying to to make a hidden menu with jquery toggle. I have a button with a click event and a class menu with a toggle event. I want to make a CSS transition on the menu, or an effect to appear.

I have a sidebar and I want to the menu to appear from left to right with a transition effect or something.

$('.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>

Thanks in advance

解决方案

If i understand you correctly, you want to animate your menu from left to right.

You can toggle class on the menu and add some transitions and styling. toggle() changes from display:none to display:block , a property which is not animatable.

Use toggleClass() to ...well...toggle :)/change classes on the menu and style those classes.

So use left:-100% and left:200px ( if that is where you want to position the menu ) and together with transition or maybe opacity.

See below

$('.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的过渡效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！