CODEWITHSUNDEEP
jquery
Mae
Mae

Reputation: 433

jQuery fade out not working

I have this button with the ID "trigger" where I trigger the overlay when it has been clicked on. But when clicking on "trigger" again, the overlay won't close. Anyone know what the problem is?

My code:

<script>
  $(function() {
    $('#trigger').click(function() {
      $('#overlay').fadeIn(500);
    });
    $('#overlay, .overlayFadeOut').click(function() {
      $('#overlay').fadeOut(500);
      $('.navbar-toggle').toggleClass("active");
    });
  });

</script>

HTML

<div class="row">
  <div class="col-md-7 col-sm-6 col-xs-4">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse" id="trigger" style="z-index: 99999999">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>

  </div>
</div>

</div>
</section>

<!-- overlay -->
<div id="overlay" data-toggle="collapse" data-target=".navbar-collapse"></div>

<!-- navigation -->
<div class="nav-container">

  <nav class="navbar navbar-fixed-top" style="z-index: 10">

    <div class="navbar-header">
    </div>

    <div class="navbar-collapse collapse">

      <div id="menu-outer">
        <div class="Table">
          <ul class="nav navbar-nav" id="horizontal-list">
            <li class="active overlayFadeOut" data-toggle="collapse" data-target=".navbar-collapse"><a href="index.html">home</a></li>
            <li class="overlayFadeOut" data-toggle="collapse" data-target=".navbar-collapse"><a href="">Lorem</a></li>
            <li class="overlayFadeOut" data-toggle="collapse" data-target=".navbar-collapse"><a href="">Ipsum</a></li>
            <li class="overlayFadeOut" data-toggle="collapse" data-target=".navbar-collapse"><a href="">Dolor</a></li>
            <li class="overlayFadeOut" data-toggle="collapse" data-target=".navbar-collapse"><a href="">Sit</a></li>
          </ul>
        </div>
      </div>


    </div>
  </nav>

</div>

Upvotes: 0

Views: 1265

Answers (1)

rrk
rrk

Reputation: 15846

Just use toggle() or fadeToggle() to toggle the display style.

$('#trigger').click(function(){
    $('#overlay').fadeToggle(500);
});

Upvotes: 3

Related Questions