Javascript 从左到中创建动画

我需要创建一个动画，这将使菜单出现在屏幕的左侧。此动画应在单击按钮后开始。 菜单内容应恢复主页宽度的55%

在上一个链接中，您可以通过菜单和按钮向左移动。开始时，菜单（带有“链接”元素）应隐藏，按钮

.glyhicon

应位于页面的最左侧。
单击此按钮，菜单和按钮应向右移动，并恢复主页的

55%

问题是我不知道怎么做。（我通过更改结构来移动菜单，但无法移动按钮。） 这是我的HTML代码

<div id="left-menu">
    <div id="map-menu" class="test">
      <nav class="menu_content">
        <ul>
          <li>Link</li>
          <li>Link</li>
          <li>Link</li>
          <li>Link</li>
        </ul>
      </nav>
    </div>
    <div id="icon-menu" class="test">
      <button id="button_menu" class="js-menu menu" type="button">
        <span class="glyphicon glyphicon-map-marker"></span>
      </button>
    </div>
  </div>

javascript:

var isActive = false;

$('.js-menu').on('click', function() {
    if (isActive) {
        $(this).removeClass('active');
        $('#left_menu').removeClass('menu-open');
    /*$('#button_menu').removeClass('move-right');
    $('#button_menu').addClass('move-left');*/
    } else {
        $(this).addClass('active');
        $('#left_menu').addClass('menu-open');
    /*$('#button_menu').removeClass('move-left');
    $('#button_menu').addClass('move-right');*/
    }

    isActive = !isActive;
});

---

你能帮我改编或重做动画吗？

首先，你的示例和fiddle中有一些东西，让jquery加载到fiddle中来处理这些事情是有帮助的

下一步

isActive

不仅没有定义，而且没有必要

if (isActive) {

应该由

if ($(this).hasClass('active')) {

及

可以完全移除

接下来，请注意下划线和连字符

$('#left-menu') != $('#left_menu')

请将其全部包装在一个文档中，以便在页面加载时可以附加

$(document).ready(function () {
  // code
});

因此，通过这些修复，您可以获得类似以下内容：

$(document).ready(function () {
  $('.js-menu').on('click', function() {
    if ($(this).hasClass('active')) {
      $(this).removeClass('active');
      $('#left-menu').removeClass('menu-open');
    } else {
      $(this).addClass('active');
      $('#left-menu').addClass('menu-open');
    }
  });
});

现在要移动按钮，问题是您正在将变换添加到

菜单中的
“打开”

类中，其中包含：

.menu-open nav {
  -webkit-transform: translateX(0);
  transform: translateX(0);
}

所以解决这个问题的一个方法就是将它添加到按钮中

.menu-open #icon-menu {
  -webkit-transform: translateX(55%);
  transform: translateX(55%);
}

或

我会让你做幻灯片动画等等

---

有几种方法可以让它比这更好，但就你现在所拥有的，这可能会帮助你开始它？也许？

这是一个没有任何javascript的纯CSS解决方案，它利用了

：checked

隐藏复选框的状态和

显示：none

，该复选框的

标签应该在
左菜单
元素之外，因此可以使用
~
将其作为目标：



按钮菜单{
显示：无；
}
.字形图标{
宽度：40px；
高度：40px；
显示：内联块；
背景图像：url（'https://cdn1.iconfinder.com/data/icons/basic-ui-elements-round/700/06_menu_stack-2-128.png');
背景大小：100%；
位置：固定；
左：5px；
最高：50%；
过渡：所有1；
光标：指针；
}
#左菜单{
背景颜色：橙色；
位置：固定；
左-100%；
宽度：55%；
最高：50%；
过渡：所有1；
}
#按钮菜单：选中+符号图标{
左：55%；
过渡：所有1；
}
#按钮菜单：选中~#左菜单{
左：0；
过渡：所有1；
}
.菜单内容{
保证金：0；
列表样式：无；
填充：0；
}
.菜单内容{
填充：20px 5px；
字号：2rem；
}
.菜单内容：悬停{
背景：蓝色；
}

链接
链接
链接
链接

感谢您的解决方案。我通过修改JQuery中的一个解决了我的问题。

.menu-open nav {
  -webkit-transform: translateX(0);
  transform: translateX(0);
}

.menu-open #icon-menu {
  -webkit-transform: translateX(55%);
  transform: translateX(55%);
}

.menu-open .active {
  -webkit-transform: translateX(55%);
  transform: translateX(55%);
}