时间戳

首页 > 解决方案 > 替代菜单按钮动画中已弃用的 jQuery .toggle() 函数

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

问题描述

我几年前建立的网站上的导航菜单按钮动画最近由于 .toggle() 函数被弃用而损坏，我无法弄清楚用什么替换代码，任何帮助将不胜感激！

这是该网站的链接（打开和关闭菜单的动画在右上角）： 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() ，正如您现在在网站上看到的那样，菜单按钮会按照打开菜单的方式进行动画处理，但是当您再次单击关闭菜单时，它不会反向触发动画。

有什么想法可以让它再次这样做吗？

非常感谢，

ñ

标签： jqueryanimationmenutoggledeprecated

解决方案

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

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')
});

推荐阅读