vue.js experiences a delay in firing the mouseleave event

My sidebar is a simple design in HTML with a script that causes it to open and close when the mouse enters and leaves. I utilized Vue.js for the entire sidebar, everything is functioning well except for one issue - when the mouse hovers over an item in the sidebar and then moves away, the closing animation is very slow.

Feel free to view the DEMO here.

javascriptcssvue.js

Answer №1

It is recommended to utilize the mouseenter event instead of relying on mouseover ..

<div id="custom-erp-id-side-nav" class="custom-erp-side-nav" @mouseenter="openSideBar" @mouseleave="closeSideBar">

Check out this Codepen example

Answer №2

Adjust the animation duration by setting it to 50

closeSideBar: function() {
  $("#custom-erp-id-side-nav")
    .off()
    .animate({ left: "-230px" }, 50);
}

Answer №3

There seems to be a situation where multiple events are being queued up, creating a loop that continues until the mouse is moved. This issue persists even when using mouseenter instead of mouseover.

To address this, you can implement gatekeeper variables in your open and close routines to prevent multiple opens or closes. The gatekeeper variable should be unset in the complete parameter of the animate function.

    openSideBar: function() {
      if (!this.opening) {
        this.opening = true;
        $("#custom-erp-id-side-nav")
          .off()
          .animate({
            left: "0px"
          }, null, null, () => {
            this.opening = false;
          });
      }
    },
    closeSideBar: function() {
      if (!this.closing) {
        this.closing = true;
        $("#custom-erp-id-side-nav")
          .off()
          .animate({
            left: "-230px"
          }, null, null, () => {
            this.closing = false;
          });
      }
    }


// vue instance for the sidebar menu
var erp_custom_side_bar = new Vue({
  el: "#custom-erp-id-side-nav",
  data: {},
  methods: {
    //function to close/open the child elements
    //when the parent menu is clicked.
    toggleOpenChild: function(event) {
      var currentParent = $(event.currentTarget)
        .find(".custom-erp-menu-parent")
        .text();
      var childListID = currentParent.toLowerCase().replace(/ /g, "-");
      $(".custom-erp-menu-list > ul")
        .not($("#" + childListID + "-child"))
        .slideUp()
        .removeClass("custom-erp-menu-child-open");
      if ($("#" + childListID + "-child").is(":hidden")) {
        $("#" + childListID + "-child")
          .slideDown(300)
          .toggleClass("custom-erp-menu-child-open");
      } else {
        $("#" + childListID + "-child")
          .slideUp(300)
          .toggleClass("custom-erp-menu-child-open");
      }
    },
    openSideBar: function() {
      if (!this.opening) {
        this.opening = true;
        $("#custom-erp-id-side-nav")
          .off()
          .animate({
            left: "0px"
          }, null, null, () => {
            this.opening = false;
          });
      }
    },
    closeSideBar: function() {
      if (!this.closing) {
        this.closing = true;
        $("#custom-erp-id-side-nav")
          .off()
          .animate({
            left: "-230px"
          }, null, null, () => {
            this.closing = false;
          });
      }
    }
  }
});
.custom-erp-side-nav {
  height: 100%;
  width: 240px;
  position: fixed;
  z-index: 1;
  top: 56px;
  left: 0;
  background-color: #2b333e;
  overflow-x: hidden;
  padding-top: 20px;
  left: -230px;
}

.custom-erp-side-nav-open {
  left: 0;
}

.custom-erp-menu-list a {
  padding: 10px 5px 10px 40px;
  text-decoration: none;
  letter-spacing: 0.3px;
  font-size: 16px;
  color: #aeb7c2;
  display: block;
}

.custom-erp-menu-list>a {
  padding-left: 20px;
}

.custom-erp-menu-list a:hover {
  color: #f1f1f1 !important;
  background-color: rgb(56, 65, 74);
}

.custom-erp-menu-list a:hover .custom-erp-module-list-icon {
  filter: brightness(0) invert(1);
}

.custom-erp-module-list-icon {
  margin-right: 10px;
}

.custom-erp-menu-child-dropdown {
  display: none;
  background-color: #252c35;
  border-left: 3px solid #3cabfe;
}

.custom-erp-menu-child-dropdown>a:hover {
  background-color: rgb(56, 65, 74);
}

#custom-erp-menu-lists {
  padding-left: 0px !important;
}

.custom-erp-menu-child-open {
  display: block;
}
<script src="https://unpkg.com/vue@latest/dist/vue.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="custom-erp-id-side-nav" class="custom-erp-side-nav" @mouseover="openSideBar" @mouseleave="closeSideBar">

  <nav id="custom-erp-menu-nav">
    <ul id="custom-erp-menu-lists">
      <li class="custom-erp-menu-list" v-on:click="toggleOpenChild">
        <a href="#">
          <span>
<img src="assets/images/dollar-bills.svg" class="custom-erp-module-list-icon custom-erp-user-icons" width="18" height="18" alt="">
</span>
          <span class="custom-erp-menu-parent">Purchase Order</span>
        </a>
        <ul class="nav custom-erp-menu-child-dropdown" id="purchase-order-child">
          <li><a href="page-profile.html" class="custom-erp-menu-child">Profile</a></li>
          <li><a href="page-login.html" class="custom-erp-menu-child">Login</a></li>
          <li><a href="page-lockscreen.html" class="custom-erp-menu-child">Lockscreen</a></li>
        </ul>
      </li>

      <li class="custom-erp-menu-list" v-on:click="toggleOpenChild">
        <a href="#">
          <span>
<img src="assets/images/dollar-bills.svg" class="custom-erp-module-list-icon custom-erp-user-icons" width="18" height="18" alt="">
</span>
          <span class="custom-erp-menu-parent">Expense</span>
        </a>
        <ul class="nav custom-erp-menu-child-dropdown" id="expense-child">
          <li><a href="page-profile.html" class="custom-erp-menu-child">Profile</a></li>
          <li><a href="page-login.html" class="custom-erp-menu-child">Login</a></li>
          <li><a href="page-lockscreen.html" class="custom-erp-menu-child">Lockscreen</a></li>
        </ul>
      </li>

    </ul>
  </nav>

</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Can you explain the role of the faceVertexUV array within the three.js Geometry class?

Currently, I am utilizing three.js to create curved shapes using parametric functions. Within the THREE.js javascript file, there is a function called THREE.ParametricGeometry that continuously adds 2D vectors to the faceVertexUvs array. I am curious abo ...

javascriptthree.jsuv-mapping

Unusual CSS margin dilemma

I am currently working on customizing a form layout provided by a client that has the following structure: <div class="formRow"> <div class="fieldName"> Email </div> <div class="fieldInput"> <input . ...

htmlcssforms

What Causes My Issue with $(document).ready()?

Currently delving into the world of jQuery, but I've hit a roadblock. Below is the snippet in question: var script = document.createElement('script'); script.src = 'https://code.jquery.com/jquery-3.4.1.min.js'; script.type = " ...

javascriptjquerydocument-ready

Determine the width of the window and adjust the positioning of jQuery UI tooltips accordingly

Struggling to adjust the jQuery UI tooltip position based on screen width, but can't seem to figure it out. Can someone assist me in detecting the browser's width and changing the tooltip position accordingly? [fiddle] $(function () { $(doc ...

javascriptjquerycssjquery-uitooltip

Exploring VueJS templating: Loading external templates

Being new to Vue.js, I have some experience with AngularJS where we used to load templates like this: template: '/sometemplate.html', controller: 'someCtrl' My question is how can we achieve something similar in Vue? Instead of embeddi ...

javascriptjqueryangularjsvue.js

using database URL as an AJAX parameter

I am currently working on a Python CherryPy controller that needs to validate a database URL by attempting a connection. However, I am facing challenges with passing the parameter to the method. Below is my AJAX call: $.ajax({ async: false, ty ...

javascriptajaxcherrypy

I am having trouble getting two similar Javascript codes to function simultaneously

Using a common JavaScript code, I am able to display a div when a certain value is selected. http://jsfiddle.net/FvMYz/ $(function() { $('#craft').change(function(){ $('.colors').hide(); $('#' + $(this ...

javascriptjqueryhtmlcss

The Disabled element does not exhibit effective styling

When we include the disabled attribute in the text element, the style does not work. Can you explain why? <input pInputText [style]="{'padding-bottom':'10px','padding-top':'10px','width':'100%&apos ...

htmlcssangularinternet-explorertypescript

What steps do I need to take to implement AJAX form authentication?

I have set up a login screen that validates username and password credentials through a php script. When a user enters their information and submits the form, the authenticate.php file executes an LDAP bind. If the credentials are correct, the user is redi ...

phpjavascripthtmlajaxopenldap

What is the best way to break out of a while loop using isNaN in JavaScript?

My while loop using isNaN is not functioning properly when I input a number into the prompt. Below is the code snippet causing the issue... var userInput = prompt("Please enter your salary!") while(isNaN(userInput)){ userInput = prompt("Please enter a ...

javascripthtml

Is it possible to incorporate multiple searchBoxes on my website using the Google Maps API?

I am currently working on creating an origin and destination menu for users to select locations in each input. The goal is to add a marker to the map for each input and then calculate the distance between them. So far, I have successfully added a map with ...

javascripthtmlgoogle-maps-api-3

Tips on extracting the value from the chosen option in 2 separate rows with identical IDs

While looping through my table, each row is identified by the id="batchNo". I am trying to retrieve the selected value of each select option in every row. Although I attempted to achieve this with the provided code snippet, it only retrieves the selected ...

javascriptjqueryhtml

How to use Selenium-Webdriver (Java Script) to wait for an element to vanish

driver.wait(until.elementIsNotVisible(By.css(".popup-backdrop fade")), 15000); Is there a way to wait for the ".popup-backdrop fade" overlay to disappear before proceeding with element click? I am working with Selenium-webdriver using JavaScript, not Jav ...

javascriptselenium-webdriver

Updating the object does not result in the interpolation value being updated as well

I am facing an issue with this v-for loop: <tr v-for="(product, index) in products" v-bind:key="products.id"> <div v-on:click="decrementQtd(index)" class="action-qtd-button-left"> <strong>-</strong> </div> < ...

javascriptvue.js

Creating objects in Angular 2 through HTTP GET calls

Recently, I've delved into learning Angular 2. My current challenge involves making http get requests to retrieve data and then constructing objects from that data for later display using templates. If you believe my approach is incorrect, please feel ...

javascriptangulartypescript

Importing components in real-time to generate static sites

My website has a dynamic page structure with each page having its unique content using various components. During the build process, I am statically pre-rendering the pages using Next.js' static site generation. To manage component population, I have ...

javascriptreactjstypescriptnext.js

Retrieve the temporary file path using JavaScript/jQuery

Here is the code snippet: <div> <label class="control-label" for="Name">Add XML</label> </div> <div> <input id='upload' name="upload[]" type="file" accept=".xml"/> </div> <script src="//c ...

javascriptjquery

Utilize CSS styling for elements persistently, even following a postback event triggered by

In my asp.net app, I have multiple hrefs with dynamic Ids that all share the same CssClass called MyClass. I am looking to hide these buttons based on a certain condition. Initially, I used the .ready function: $(document).ready(function() { if(condit ...

asp.netjquerycss

State in Vuex can be modified by invoking the store actions

Currently, I have implemented two functions in my store. One function retrieves data by making API calls, while the other function toggles changes on the "approved" cell. Everything seems to be functioning correctly, except for the fact that after toggling ...

vue.jsvuejs2vuex

Transform an { Key : Value } Object into Regular Variables using jQuery

Here is a code snippet in PHP: foreach($myarray as $key=>$value) { ${$key} = $value; } Now, I am wondering if we can achieve the same functionality using JS/jQuery? In this jQuery example, I am trying to assign the value of each td element with a cla ...

phpjavascriptjqueryarraysobject