JS Sliding Panel: prevent delay of mouseleave event

Question

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?

RAllen · Accepted Answer · 2024-04-07 01:13:35Z

0

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.

edited Apr 7, 2024 at 1:13

answered Apr 7, 2024 at 0:58

RAllen

1,5051 gold badge8 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

RAllen Over a year ago

@Samwise_71 No worries! If my answer was helpful for you, would you mind picking it as correct? Thanks!

Collectives™ on Stack Overflow

JS Sliding Panel: prevent delay of mouseleave event

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related