jQuery mistakenly causes hover

Question

I want to show hidden navigation with jQuery. Here is my code:

$(document).ready(function() {
  var x = 0;
  $(".navbar-fixed-top").mouseover(function() {
    console.log("555");
    if (x != 1) {
      $(".header-triangle").fadeToggle();
      $(".topbar-menu").slideToggle();
    }
    x = 0;
  });
});

.topbar-menu {
  background-color: rgba(84, 84, 84, 0.4);
  height: 40px;
  line-height: 40px;
  direction: rtl;
  display: none;
}
#fix-header {
  background-color: rgba(84, 84, 84, 0.4);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hidden-xs">
  <nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container-fluid" id="fix-header">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">
          <img src="img/150_50.png" alt="image">
        </a>
      </div>
      <div id="navbar" class="navbar-collapse collapse">
        <ul class="nav navbar-nav navbar-left">
          <li class=" hidden-xs ">
            <a id="navbar-menu" href="#">
              <img id="menuHeader" src="img/hamburgerMenu.png">
            </a>
          </li>
          <li class="visible-xs"><a href="#">example </a>
          </li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
          <li>
            <div class="searchbox-navigation">
              <form class="navbar-form" role="search">
                <div class="input-group">
                  <div class="input-group-btn">
                    <button class="btn btn-default " type="submit"><i class="glyphicon glyphicon-search"></i>
                    </button>
                  </div>
                  <input type="text" class="form-control" style="direction: rtl;" placeholder="search" name="q">
                </div>
              </form>
            </div>
          </li>
        </ul>
      </div>
      <!--/.nav-collapse -->
    </div>
    <!--/.container-fluid -->
    <div class="topbar-menu container-fluid hidden-xs">
    </div>
  </nav>
</div>
<script src="js/headerEvent.js"></script>

When I leave my mouse from that section, it logs another “555”. why does this happen? I want to have it logged just once.

Answer 1

here's a codepen link: http://codepen.io/anon/pen/RaGLWd You'd wan to change it to either mouseenter or mouseleave to trigger it only once:

$(".navbar-fixed-top").mouseenter(function() {
    console.log("555");
    if (x != 1) {
      $(".header-triangle").fadeToggle();
      $(".topbar-menu").slideToggle();
    }