Javascript 全页导航滑入淡入淡出问题

当用户单击

时，一个完整的页面导航将滑入视图。如果body有类，则需要另一个函数来运行“click”。您只需使用css即可，因为您已经触发了该类：


使用jQuery实现了类似的淡入淡出
slide nav
div透明度的解决方案

当用户单击
slide nav trigger
时，
导航处于打开状态
类切换到
body
元素，并且
if
语句中的第一个计算结果为
true
，然后在
slide nav
上执行淡入动画

// if body hasClass of navigation-is-open toggled on
if ($('body').hasClass('navigation-is-open')){
        // animate opacity on slide-nav from 0 to 1
        slideNav.animate({
            opacity:1 }, 2000, function(){});
        // if navigation-is-open is toggled off
       }

当用户第二次单击
slide nav trigger
时，它会从
body
关闭
navigation is open
类，这是当
if
语句评估为
false
时，因为我不再有
navigation is open
类附加到
body
元素了。因此，我现在使用
else
语句在
slide nav

if ($('body').hasClass('navigation-is-open')){
    // animate opacity on slide-nav from 0 to 1
    slideNav.animate({
        opacity:1 }, 2000, function(){});
    // if navigation-is-open is toggled off
    } else {
        // animate opacity from 1 to 0
        slideNav.animate({
            opacity:0 },1000, function(){});
    }

链接到更新的

// if body hasClass of navigation-is-open toggled on
if ($('body').hasClass('navigation-is-open')){
        // animate opacity on slide-nav from 0 to 1
        slideNav.animate({
            opacity:1 }, 2000, function(){});
        // if navigation-is-open is toggled off
       }

if ($('body').hasClass('navigation-is-open')){
    // animate opacity on slide-nav from 0 to 1
    slideNav.animate({
        opacity:1 }, 2000, function(){});
    // if navigation-is-open is toggled off
    } else {
        // animate opacity from 1 to 0
        slideNav.animate({
            opacity:0 },1000, function(){});
    }