Upon the user's click on
<a href="#slide-nav" class="slide-nav-trigger">The Dilemma
Instead of abruptly turning on and off when toggling the navigation-is-on class to the body, I aim to have slide-nav fade in and out. By animating the opacity of slide-nav, I successfully achieved a fading effect upon one click.
$(function(){
// assign click event to slide-nav-trigger
$('.slide-nav-trigger').on('click',function(event){
event.preventDefault(); // cancel the default action
// toggle navigation-is-open class to body upon click
$('body').toggleClass('navigation-is-open');
var slideNav = $('.slide-nav');
slideNav.animate({
opacity:1 }, 2000, function(){});
});
});
In this code snippet, I'm specifically targeting slide-nav and animating its opacity to create the desired fading effect. Despite trying to utilize the fadeIn method, I found that this approach remains the most effective in achieving my intended outcome.
To explore further, visit this CodePen link.