JS Sliding Panel: prevent delay of mouseleave event

I wrote a JS panel class that shows a sliding panel on top, bottom, left or right border of the page.

The panel is shown when the mouse comes near to the top, bottom, left or right edge of the page (or by default).

The panel hides when the mouse leaves it.

Please see my CodePen: https://codepen.io/Samwise_71/pen/MWRVaJb

You will notice that sometimes when mouse leaves the panel, it can take some seconds until the hiding animation starts (tested in Firefox):

// Hide panel on mouse leave
this.#panel.on("mouseleave", function (e) { panel.hide(e); });

/**
 * Slides the panel out of viewport.
 * @param {event object} e   
 */
hide(e) {
  if (!this.isVisible()) {
    return;
  }

  let ymax = this.#panel.height();
  let xmax = this.#panel.width();

  // Prevent leave to side of panels position
  if (this.#position == UserInterface.Panel.PositionTop && e.offsetY < 0 ||
    this.#position == UserInterface.Panel.PositionBottom && e.offsetY > ymax ||
    this.#position == UserInterface.Panel.PositionLeft && e.offsetX < 0 ||
    this.#position == UserInterface.Panel.PositionRight && e.offsetX > xmax) {
    return;
  }

  let margin = this.getMargin();
  let css = {};
  css[margin.key] = -1 * margin.pixels;
  let panel = this;
  this.#panel.animate(css, this.#speed, function () { panel.isVisible(false); });
}

I'm not sure what causes this delay, it seems to be independent from mouse movement.

What should I change to start the animation immediately after mouse crosses panels border?

The problem is how you execute the show and hide methods. If you add console.log at the top of your 'show' method, you will notice that it is executed multiple times whenever you move the mouse over the panel. As a result, your panel doesn't close until all the opening animations finish.

Technically, you don't need to check isVisible and then set isVisible. You just need to stop the previous animation and start the one that is meaningful at the current moment. This can be achieved by simply adding this.#panel.stop(); in show() and hide() methods right before this.#panel.animate. JQuery's stop() function simply cancels all the existing animations.

Please let me know if this helps.