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?

Answers 1

  • 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