导航打开时禁用导航切换按钮的悬停效果

Question

我试图在导航菜单打开时禁用导航切换按钮的悬停效果。我在单击按钮时切换 class 并且运行ning 一个 if 语句说如果 class 没有切换它应该只运行动画。我可以在控制台中看到 div.toggle-btn 正在切换禁用悬停 class 但它并没有像我期望的那样 disable/enable javascript 代码。

var btnhover = new TimelineMax({paused: true});

    var navtoggle = $('.toggle-btn').hasClass('disable-hover');

    if (navtoggle === false) {
      if ($(window).width() >= 768) {
        btnhover.to(".one", .3, {
           y: 5,
           ease: Expo.easeInOut,
        })}
      else {
        btnhover.to(".one", .3, {
           x: -5,
           ease: Expo.easeInOut,
        })
      }
    }

    if (navtoggle === false) {
      if ($(window).width() >= 768) {
        btnhover.to(".two", .3, {
           y: -5,
           ease: Expo.easeInOut,
           delay: -.3
        })}
      else {
        btnhover.to(".two", .3, {
           x: 5,
           ease: Expo.easeInOut,
           delay: -.3
        })
      }
    }

    function btnover(){
      if (navtoggle === false) {
        btnhover.play();
      }
    }

    function btnout(){
      if (navtoggle === false) {
        btnhover.reverse();
      }
    }

    $(".toggle-btn").hover(btnover, btnout);


    function disableHover() {
      $("div.toggle-btn").toggleClass("disable-hover");
    }

$(document).on("click", ".toggle-btn", function() {
      disableHover();
});

Answer 1

首先，您使用的是 navtoggle = false，这将转换为 'navtoggle equals false'，当您更新变量的值时，它将始终 return 为真。

您想使用 navtoggle === false 或 !navtoggle，这将转换为 'is navtoggle equal to false?'。

其次，您也没有检查按钮是否在 btnover/btnout 功能内部具有禁用 class 功能。您应该在这些函数中添加一个条件来检查动画是否应该播放。

最后，您需要在每次悬停时实际检查按钮是否有 class。一旦你设置了 navtoggle 变量，它就不会再改变了。检查 btnover/btnout 函数内部，看看按钮是否显示 class.

function btnover(){
  var navtoggle = $('.toggle-btn').hasClass('disable-hover');

  if (navtoggle === false) {
    btnhover.play();
  }
}

导航打开时禁用导航切换按钮的悬停效果

Disabling hover effect of nav toggle button when nav is open

javascript

gsap