JQuery Auslösung fadeIn und fadeOut auf Menü

Question

Demo - https://jsfiddle.net/jhhpLapv/1/

// Main Script For Ciel Viole 

$(document).ready(function() { 
    $('.client-link').click(function() { 
      $('.navbar').slideToggle("fast"); 
    }); 
}); 

Beim Auslösen des Hamburger-Menüs, mag ich die Menü-Links zu FadeIn und anschließend Fadeout, wenn das Menü geschlossen wird. Ich bin sehr neu und soweit ich gekommen bin. Wie kann ich das Ereignis beim ersten Klicken auf das Ereignis beim Auslösen des Fades hören und beim zweiten Klicken ausblenden?

Answer 1

Hier ist eine Möglichkeit, die Sie versuchen können. Working Fiddle

ich Ihren Code nur mit aktualisiert:

$(document).ready(function() { 
    var $navbar = $('.navbar'); 
    $('.client-link').click(function() { 
    if (!$navbar.hasClass("active")) { 
     $navbar.fadeIn("slow").addClass("active"); 
    } 
    else { 
     $navbar.fadeOut("slow").removeClass("active"); 
    } 
    }); 
}); 

Answer 2

Sollte funktionieren:

$(document).ready(function() { 
    $('.client-link').click(function() { 
     if($('.navbar').is(':visible')){ 
     $('.navbar').fadeOut("fast"); 
     }else{ 
     $('.navbar').fadeIn("fast"); 
     } 
    }); 
}); 

Answer 3

immer CSS-basierte Animationen versuchen. Sie sind sehr glatt und einfach zu implementieren.

Hier ist wie. Anstatt fadeIn() und fadeOut() aufzurufen, fügen Sie dem Zielelement einfach eine Klasse hinzu. Dann können Sie in css transition: all 0.3s ease-in; (oder andere bevorzugte Werte) verwenden, um einen Übergang zu erstellen. Im Folgenden finden Sie ein Beispiel mit Ihrem Code. Du kannst es viel besser machen.

// Main Script For Ciel Viole 
 

 
$(document).ready(function() { 
 
    $('.client-link').click(function() { 
 
    $('.navbar').toggleClass("active"); 
 
    }); 
 
});

.client-item { 
 
    position: relative; 
 
    float: right; 
 
    list-style: none; 
 
} 
 
.client-link { 
 
    font-size: 2rem; 
 
    font-weight: 600; 
 
    text-decoration: none; 
 
    text-transform: uppercase; 
 
    color: #c5c5c5; 
 
} 
 
.client-link:hover { 
 
    color: #151515; 
 
    -webkit-transition: color 2s ease; 
 
    transition: color 2s ease; 
 
} 
 
.navbar { 
 
    display: none; 
 
    -webkit-animation-delay: .3s; 
 
    animation-delay: .3s; 
 
} 
 
.about-header { 
 
    font-size: 3rem; 
 
    line-height: 34px; 
 
    font-weight: 600; 
 
    margin-top: 2rem; 
 
} 
 
.values { 
 
    background-image: url('../images/infinity-bg.jpg'); 
 
    background-size: contain; 
 
    color: #fff; 
 
    padding-bottom: 15rem; 
 
    margin-top: 2rem; 
 
} 
 
.title { 
 
    font-size: 1.8rem; 
 
    font-family: 'Libre Baskerville', serif; 
 
    font-weight: 400; 
 
    letter-spacing: .4rem; 
 
    -webkit-font-smoothing: antialiased; 
 
    text-rendering: optimizeLegibility; 
 
} 
 
.title a { 
 
    color: #767676; 
 
} 
 
.content-section { 
 
    padding: 1rem 0; 
 
    margin-bottom: 2.5rem; 
 
} 
 
.navbar-list { 
 
    list-style: none; 
 
    margin-bottom: 0; 
 
    display: inline-flex; 
 
} 
 
.navbar-item { 
 
    position: relative; 
 
    float: left; 
 
    margin-bottom: 0; 
 
} 
 
.navbar-link { 
 
    font-size: 1.2rem; 
 
    letter-spacing: .2rem; 
 
    font-weight: 600; 
 
    margin: 0 25px 0 0; 
 
    text-transform: uppercase; 
 
    line-height: 6.5rem; 
 
    color: #7c7c7c; 
 
    font-family: 'Arimo', sans-serif !important; 
 
    -webkit-font-smoothing: antialiased; 
 
    text-rendering: optimizeLegibility; 
 
} 
 
.navbar-link:hover { 
 
    color: #000000; 
 
    -webkit-transition: color 2s ease; 
 
    transition: color 2s ease; 
 
} 
 
.navbar-link-left { 
 
    font-size: 1.2rem; 
 
    letter-spacing: .2rem; 
 
    font-weight: 600; 
 
    margin: 0 0 0 25px; 
 
    text-transform: uppercase; 
 
    line-height: 6.5rem; 
 
    color: #7c7c7c; 
 
    font-family: 'Arimo', sans-serif !important; 
 
    -webkit-font-smoothing: antialiased; 
 
    text-rendering: optimizeLegibility; 
 
} 
 
.navbar-link-left:hover { 
 
    color: #000000; 
 
    -webkit-transition: color 2s ease; 
 
    transition: color 2s ease; 
 
} 
 
/* Roy's override */ 
 

 
.navbar { 
 
    display: block; 
 
    width: 0px; 
 
    overflow: hidden; 
 
    -webkit-transition: all .3s ease; 
 
    transition: all .3s ease; 
 
    float: right; 
 
    background: #f1f1f1; 
 
} 
 
.navbar.active { 
 
    width: 100%; 
 
} 
 
.navbar-item { 
 
    opacity: 0; 
 
    -webkit-transition: all .3s ease; 
 
    transition: all .3s ease; 
 
    -webkit-transition-delay: .3s; 
 
    transition-delay: .3s; 
 
} 
 
.navbar.active .navbar-item { 
 
    opacity: 1; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" /> 
 
<section class="header"> 
 
    <h2 class="title"><a href="#">Site Title</a> 
 
     <li class="client-item"><a class="client-link" href="#"><i class="fa fa-bars"></i></a></li></h2> 
 
</section> 
 
<nav class="navbar"> 
 
    <ul class="navbar-list"> 
 
    <li class="navbar-item"><a class="navbar-link-left" href="#" target="_top">Contact</a> 
 
    </li> 
 
    <li class="navbar-item"><a class="navbar-link-left" href="#" target="_top">Store</a> 
 
    </li> 
 
    </ul> 
 
    <ul class="navbar-list Right"> 
 
    <li class="navbar-item"><a class="navbar-link" href="" target="_blank"><i class="fa fa-youtube"></i></a> 
 
    </li> 
 
    <li class="navbar-item"><a class="navbar-link" href="" target="_blank"><i class="fa fa-soundcloud"></i></a> 
 
    </li> 
 
    <li class="navbar-item"><a class="navbar-link" href="" target="_blank"><i class="fa fa-twitter"></i></a> 
 
    </li> 
 
    <li class="navbar-item"><a class="navbar-link" href="/" target="_blank"><i class="fa fa-instagram"></i></a> 
 
    </li> 
 
    <li class="navbar-item"><a class="navbar-link" href="" target="_blank"><i class="fa fa-facebook"></i></a> 
 
    </li> 
 
    <li class="navbar-item"><a class="navbar-link" href="#" target="_blank"><i class="fa fa-apple"></i></a> 
 
    </li> 
 
    </ul> 
 
</nav>