时间戳

首页 > 解决方案 > 将我的 div 的动画更改为从右向左滑出，而不是淡入

jquery - 将我的 div 的动画更改为从右向左滑出，而不是淡入

问题描述

我正在制作一个网站，目前我有一个按钮，单击该按钮将淡入 div，并在另一次单击时淡出（切换类）。

我改变了主意，希望让淡入的 div 现在从右侧滑出，然后再次切换时会滑回右侧并消失。

我已经有下面的代码，它适用于淡入，但我似乎无法弄清楚让它从右侧滑出？

$('.menubutton').click(function() {
    $('.newMenu').fadeToggle('280');
});

任何帮助将不胜感激。

标签： jqueryhtml

解决方案

$('.menu-button').click(function(){
	$('#menu').toggleClass('open');
})
#menu {
   position: absolute;
   right: 0;
   bottom: 0;
   top: 0;
   width: 0px;
   overflow: hidden;
   transition: width 300ms ease;
   background: #EEE;
   padding: 0;
   box-sizing: border-box;
}
#menu.open {
  width: 256px;
  padding: 20px;
}
.menu-button {
  padding: 20px;
  cursor: pointer;
  background: #DDD;
  margin: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a class="menu-button">Open/Close menu</a>

<div id="menu">
  This is the menu div
</div>

推荐阅读