Javascript 如何使用jQuery切换和动画使外部div在单击时从左转到右？

菜单工作正常，但没有动画。我希望单击时的

.fullpagenav

从左到右显示，重新单击时返回（从右到左）。如果你能用切换和动画来完成，那就太好了，只需要很短的代码

我在以下主题中找到了此代码：

因此，我有以下代码：

$（“.secondary toggle”）。单击（函数（）{
$（'.fullpagenav'）.animate（{width:'toggle'}，350）；
});
.fullpagenav{
位置：固定；
身高：100%；
宽度：100%；
z指数：2；
背景色：#4646；
显示：无；
}

...
上面的代码不起作用，我为您创建了类似的代码，以向您展示如何做到这一点。这是简单的代码，如果你不明白什么，就问我

<script
  src="https://code.jquery.com/jquery-3.1.1.min.js"
  integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
  crossorigin="anonymous"></script>
<script>
  $(document).on('click', '.menu-item', function(e) {
  var self = $(e.currentTarget);
  self.toggleClass('menu-item-toggle')
  });
</script>
<style>
  .menu-item {
    width: 50px;
    height: 50px;
    background-color: green;
    position: relative;
    left: 0;
    transition: left 2s;
  }
  .menu-item-toggle {
    left: 100px;
  }
</style>

<div class="menu-item">Menu item</div>


$（文档）。在（'单击'，'上。菜单项'，函数（e）{
var self=$（e.currentTarget）；
self.toggleClass（'menu-item-toggle'）
});
.菜单项{
宽度：50px；
高度：50px；
背景颜色：绿色；
位置：相对位置；
左：0；
过渡：左2秒；
}
.菜单项切换{
左：100px；
}
菜单项

首先，您需要将其设置在页面的最左侧，然后创建一个位置为left:0的类，然后在单击时切换该类，并使用效果转换


$（“.secondary toggle”）。单击（函数（）{
if（$（this）.hasClass（'active_nav'））{
$（'fullpagenav'）.removeClass（'active_nav'）；
}
否则{
$（'.fullpagenav'）.addClass（'active_nav'）；
}
});
.fullpagenav{
位置：固定；
身高：100%；
宽度：100%；
z指数：2；
背景色：#4646；
左-100%；
过渡：所有1线性1；
-webkit转换：所有1线性1；
-moz过渡：所有1s线性1s；
}
.主动导航{
左：0！重要；
过渡：所有1线性1；
-webkit转换：所有1线性1；
-moz过渡：所有1s线性1s；
}

...
我将
fullpagenav
div放置在最左侧，然后单击该div，该div将根据您的要求设置动画

下面是更新的代码


$（.fullpagenav”）。单击（函数（）{
$（'.secondary'）.animate（{width:'toggle'}，350）；
});
.fullpagenav{
位置：固定；
身高：100%；
宽度：1%；
左边缘：-1%；
}
.中学{
位置：固定；
身高：100%；
宽度：10%；
背景色：#4646；
显示：无；
左：1%；
}

...
在这里阅读jquery动画：我的英语不太好。。我很难理解这几页的意思。。我只能看到示例，但我真的不理解文档的所有其他部分。这在开始时工作正常，但当我单击关闭时，它不会关闭：（这一个看起来像我想要的，但是，如果我有单独的按钮要单击？因为我的菜单需要隐藏（或仅在页面外）当我点击我的按钮时，div需要做你上面所做的事情（所以，向左滑动，在ri点击时向右移动），我给了代码解释宽度，你应该适合你的需要。如果我帮助，请设置“最佳答案”选项；]是的，你解决了我的问题！爱你lol。你能解释一下什么是“切换”吗我想这是什么替代的东西，对吗？还有，为什么“.click”的方法与“.on（'click'…）”的方法不同？所以我给你选了一个最可爱的答案！