如何切换 .animate 函数 jQuery答案

【问题标题】：How to toggle .animate function jQuery如何切换 .animate 函数 jQuery
【发布时间】：2020-03-21 09:14:38
【问题描述】：

我正在寻找一种使用 .animate 函数在点击时切换此动画的方法（我正在寻找一种不切换 CSS 类的解决方案）

我想要实现的是由按钮 (.about) 打开的覆盖菜单，它将#header id 的动画从 90px 宽度切换到 100% 宽度，然后动画回到 90px 宽度以关闭

目前动画只会在点击时播放一次

$(".about").click(function () {

    $("#header").animate({
        width: '100%'
    }, 1000);

    $('footer').addClass("show");

    $("footer").animate({
        opacity: 1
    }, 300);

});


$("footer").click(function () {


     $("footer").animate({
        opacity: 0
     }, 300);


    $("#header").animate({
        width: '90px'
    }, 1000);

});

有人对此有任何建议或参考吗？

【问题讨论】：

您能否在此处包含您的 HTML 以了解您想要实现的目标？
我不确定 HTML 是否会让它更清晰 - 我想要实现的是一个由按钮 (.about) 打开的覆盖菜单，它可以切换 #header id 的动画90px 宽度到 100% 宽度，然后动画回到 90px 宽度以关闭

标签： jquery jquery-animate

【解决方案1】：

您可以使用old toggle method，它接收多个句柄并在每次点击时循环它们。但是，由于它已被弃用，实现切换的最佳方法是检查宽度，然后进行相应设置。另一种选择是使用toggleClass

$("#test").click(function() {
  $(this).animate({
    width: $(this).width() == 90 ? '100%' : 90,
  });
});

div {
  background: red;
  width: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div id="test">
  Test DIV
</div>

【讨论】：