替代菜单按钮动画中已弃用的 jQuery .toggle() 函数

Question

我几年前建立的网站上的导航菜单按钮动画最近由于 .toggle() 函数被弃用而损坏了，我不知道用什么来替换代码，任何帮助都是非常感谢！

这是该站点的 link（打开和关闭菜单的动画在右上角）： http://blackcurrent.co/#home

当您单击菜单按钮时，该符号应该在菜单打开时播放动画，然后当您再次单击同一个按钮关闭它时，动画应该再次触发，但方向相反。

这里是 jQuery:

<script type="text/javascript">
jQuery(document).ready(function() {
    jQuery('#bespokeButton').toggle(
function(){
    jQuery("#segment1").removeClass('seg1ani2');
    jQuery("#segment1").toggleClass('seg1ani');
    jQuery("#segment2Container").removeClass('seg2Contani2');
    jQuery("#segment2Container").toggleClass('seg2Contani');
    jQuery("#segment3").removeClass('seg3ani2');
    jQuery("#segment3").toggleClass('seg3ani');
},
function(){
    jQuery("#segment1").removeClass('seg1ani');
    jQuery("#segment1").toggleClass('seg1ani2');
    jQuery("#segment2Container").removeClass('seg2Contani');
    jQuery("#segment2Container").toggleClass('seg2Contani2');
    jQuery("#segment3").removeClass('seg3ani');
    jQuery("#segment3").toggleClass('seg3ani2');
});
    });
</script>

我已将 .toggle() 函数更改为 .click() 并且正如您现在在网站上看到的那样，菜单按钮会按应有的方式动画以打开菜单，但是当您再次单击以关闭菜单时它不会触发反向动画。

有什么办法让它再次这样做吗？

非常感谢，

N

Answer 1

一种简单的方法是在按钮上切换 class 并检查 class 是否存在。

function openMenu(){
    jQuery("#segment1").removeClass('seg1ani2');
    jQuery("#segment1").toggleClass('seg1ani');
    jQuery("#segment2Container").removeClass('seg2Contani2');
    jQuery("#segment2Container").toggleClass('seg2Contani');
    jQuery("#segment3").removeClass('seg3ani2');
    jQuery("#segment3").toggleClass('seg3ani');
}

function closeMenu(){
    jQuery("#segment1").removeClass('seg1ani');
    jQuery("#segment1").toggleClass('seg1ani2');
    jQuery("#segment2Container").removeClass('seg2Contani');
    jQuery("#segment2Container").toggleClass('seg2Contani2');
    jQuery("#segment3").removeClass('seg3ani');
    jQuery("#segment3").toggleClass('seg3ani2');
}


jQuery('#bespokeButton').click(function(e){
    if($(this).hasClass('open')){
      closeMenu()
    }else{
      openMenu()
    }
    $(this).toggleClass('open')
});

替代菜单按钮动画中已弃用的 jQuery .toggle() 函数

Alternative to deprecated jQuery .toggle() function in menu button animation

jquery

animation

menu

toggle

deprecated