导航栏在单击时消失

Question

我的导航栏需要帮助。目前，它出现在加载（汉堡包）并显示点击链接。但是在您单击以关闭导航器后它会消失。我不确定为什么。代码如下：

Javascript：

var animation = 'easeOutCubic';
delay = 60;

$(document)
  .on('click', '.fa-bars', function() {
    var i = 0;
    $('nav').before($('#bubble'));
    $('#bubble').fadeIn();
    $('#mainnav').find('li').each(function() {
      var that = $(this);
      i++;
      (function(i, that) {
        setTimeout(function() {
          that
            .animate({
              'left': '20px'
            }, {
              duration: 350,
              easing: animation
            })
            .fadeIn({
              queue: false
            });
        }, delay * i)
      }(i, that))
    });
    $('.fa-bars').fadeOut(100, function() {
      $(this)
        .removeClass('fa-bars')
        .addClass('fa-times')
        .fadeIn();
    });
  })
  .on('click', '.fa-times', function() {
    $('#bubble').fadeOut();
    $('#mainnav').find('li')
      .animate({
        'left': '-550px'
      }, {
        duration: 250
      })
      .fadeOut({
        queue: false
      });

    $('.hamb').fadeOut(100, function() {
      $(this)
        .find($('i'))
        .removeClass('fa-times')
        .addClass('fa-bars')
        .end()
        .fadeIn();
    });
  })

HTML

<section id="welcome">
<header class="close">
    <nav role='navigation' id="mainnav">
        <div class="relative">
            <div class="holder">
                <ul>
                    <li><a href="#welcome">Home</a></li>
                    <li><a href="#about">About Me</a></li>
                    <li><a href="#portfolio">Testimonials</a></li>
                    <li><a href="#resume">Portfolio</a></li>
                    <li><a href="#contactMe">Contact Me</a></li>
                </ul>
            </div>
        </div>
    </nav>
    <div class="hamb">
        <a href="#"><i class="fa fa-bars"></i></a>
    </div>

    <canvas id="bubble"></canvas>
</header>

请帮忙！我不确定是什么问题。