Adjustment for on hover sidebar

Question

I need help with my sidebar, one in the left side of the window representing table of contents and the other on the top of the window representing menu

$(function() {
  $('#toc_nav').hover(function() {
    $(this).animate({
      width: '21%'
    }, 500);
    $('#iframe_wrapper').animate({
      width: '79%'
    }, 500)
  }, function() {
    $(this).animate({
      width: '2px'
    }, 500);
    $('#iframe_wrapper').animate({
      width: '100%'
    }, 500)
  }).trigger('mouseleave');
});

$(function() {
  $('#menu_nav').hover(function() {
    $(this).animate({
      height: '5%'
    }, 500);
    $('#iframe_wrapper').animate({
      height: '95%'
    }, 500)
  }, function() {
    $(this).animate({
      height: '2px'
    }, 500);
    $('#iframe_wrapper').animate({
      height: '100%'
    }, 500)
  }).trigger('mouseleave');
});

#toc_nav {
  width: auto;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  background: #111;
  color: #fff;
  overflow: hidden;
}

#menu_nav {
  width: 100%;
  height: 100px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  background: #111;
  color: #fff;
  overflow: hidden;
}

#content_wrapper {
  widht: 100%;
  height: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="main_wrapper">

  <nav id="menu_nav">
    <span>MENU</span>
    <span id="submit_button"> Submit Lesson </span>
  </nav>

  <div id="content_wrapper">
    <nav id="toc_nav">
      <h3 id="toc_label">Table of contents</h3>
      <hr>
      <!-- TOC is generated based on the data structure -->
    </nav>

    <div id="iframe_wrapper">
      <!-- Page Content (Here is a lesson content displayed in iframe) -->
    </div>
  </div>

</div>

The problem I have is that when you hover over the 2px line of the collapsed side bars (when the window is not in fullscreen) they tend to bug and repeatedly keep showing and hiding (in Chrome).

Is there a way to prevent this behaviour? I am more backend developer so I have absolutely no clue how to fix this.

Answer 1

You don't really need jquery animation for this, you can use CSS transition instead:

$(function() {
  $('#toc_nav').hover(function() {
    this.style.width = "21%";
    $('#iframe_wrapper').height("79%");
  }, function() {
    this.style.width = "2px";
    $('#iframe_wrapper').height("100%");
  }).trigger('mouseleave');

  $('#menu_nav').hover(function() {
    this.style.height = "5%";
    $('#iframe_wrapper').height("95%");
  }, function() {
    this.style.height = "2px";
    $('#iframe_wrapper').height("100%");
  }).trigger('mouseleave');
});

#toc_nav {
  width: auto;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  background: #111;
  color: #fff;
  overflow: hidden;
  transition: width 0.5s;
}

#menu_nav {
  width: 100%;
  height: 100px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  background: #111;
  color: #fff;
  overflow: hidden;
  transition: height 0.5s;
}

#content_wrapper {
  width: 100%;
  height: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="main_wrapper">

  <nav id="menu_nav">
    <span>MENU</span>
    <span id="submit_button"> Submit Lesson </span>
  </nav>

  <div id="content_wrapper">
    <nav id="toc_nav">
      <h3 id="toc_label">Table of contents</h3>
      <hr>
      <!-- TOC is generated based on the data structure -->
    </nav>

    <div id="iframe_wrapper">
      <!-- Page Content (Here is a lesson content displayed in iframe) -->
    </div>
  </div>

</div>

In fact you don't need any javascript for this simple task:

#toc_nav {
  width: auto;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  background: #111;
  color: #fff;
  overflow: hidden;
  transition: width 0.5s;
  width: 2px;
}

#menu_nav {
  width: 100%;
  height: 100px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  background: #111;
  color: #fff;
  overflow: hidden;
  transition: height 0.5s;
  height: 2px;
}

#content_wrapper {
  width: 100%;
  height: 100%;
}

#toc_nav:hover, #toc_nav:focus
{
  width: 21%;
}
#toc_nav:hover ~ #iframe_wrapper, #toc_nav:focus ~ #iframe_wrapper
{
  width: 79%;
}
#menu_nav:hover ~ * #iframe_wrapper, #menu_nav:focus ~ * #iframe_wrapper
{
  height: 95%;
}
#menu_nav:hover, #menu_nav:focus
{
  height: 5%;
}

<div id="main_wrapper">

  <nav id="menu_nav">
    <span>MENU</span>
    <span id="submit_button"> Submit Lesson </span>
  </nav>

  <div id="content_wrapper">
    <nav id="toc_nav">
      <h3 id="toc_label">Table of contents</h3>
      <hr>
      <!-- TOC is generated based on the data structure -->
    </nav>

    <div id="iframe_wrapper">
      <!-- Page Content (Here is a lesson content displayed in iframe) -->
    </div>
  </div>

</div>