JQuery triggering fadeIn and fadeOut on menu

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

// Main Script For Ciel Viole

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

When triggering the hamburger menu, I want the menu links to fadein and subsequently fadeout when the menu is closed. I am very new to this and about as far as I have gotten. How can I listen to the event to trigger the fade in the first time the menu is clicked, and fade out the second time it is clicked?

javascript jquery html css
Rakesh

Answers 1

Submit Answer
  • Rakesh

    Always try css based animations. They are very smooth and easy to implement.

    Here is how. Instead of calling fadeIn() and fadeOut() just add a class to the targeted element. Then in css you can use transition: all 0.3s ease-in;(or any other preferable values) to create a transition. Below is just an example using your code. You can make it way, way better than this.

    // 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>

Related Articles