`How to prevent other events from triggering in jQuery while an animation is running`

Writing again to seek help with a script issue on my webpage. I previously posted about a problem with the menu focus a week or two ago on this forum. A user suggested a helpful script, but unfortunately, it has a bug that I can't seem to fix. I've tried various solutions, but the problem persists.

Here is a Fiddle code example that demonstrates the issue: http://jsfiddle.net/PRZYN/15/

$(document).ready(function() {
    $('#handle').mouseenter(slideIn);
    $("#box").mouseleave(function() {
        $(this).animate({
            left: "-=180px"
        }, "fast");
        $('#handle').mouseenter(slideIn);
    });
    $("[name='skin']").mouseleave(function(e) {
        e.stopPropagation();
    });

});

function slideIn() {
    if ($("#box")) $("#box").animate({
        left: "+=180px"
    }, "slow");
    $(this).unbind("mouseenter");
}

The issue with the script is that when both divs are in an animation state and the user quickly moves the mouse through the animation, the script becomes confused. This results in the menu continuously showing and hiding, which is quite frustrating. There are other scenarios where the bug occurs, but it's challenging to pinpoint. I believe the problem also arises when the user hovers over the div and the mouse stops at a specific point, which varies each time.

I've identified the problem to some extent, but I'm unsure how to solve it. I need to disable all other events on the div (except for .animation()) when the menu is in an animation state, and then re-enable them once the animation is complete, and the user wants to open or hide the menu again.

I hope my question is clear, and I would greatly appreciate any assistance in resolving this issue.

Regards, Miha

Answer №1

To prevent your animation from continuing after the user stops interacting with the element, you can utilize the .stop() function. It is recommended to use fixed values for the left property instead of using += and -=, as this can result in misalignment if the user rapidly moves the mouse in and out of the container. Opt for values like "-180px" and "0px" over "-=180px" and "+=180px".

Check out the JSFiddle demo here: http://jsfiddle.net/PRZYN/16/

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

The JavaScript-generated SVG is visible in the inspector tool but does not appear on the screen

Test Code for XYZ <!doctype html> <html lang="en"> <head> <meta charset="utf-8> <title>xyz</title> </head> <body> <div> <svg id="mysvg" xmlns="http://www.w3.org/2000/svg" width="360 ...

How to incorporate an icon into a React Bootstrap Dropdown menu

I'm struggling to figure out how to include an icon in my react dropdown button, similar to the one shown in the following example. https://i.sstatic.net/cn0b0.png The react bootstrap package I am currently using does not seem to offer a straightfor ...

The functionality of ng-show becomes compromised when used in conjunction with ng-animate

Once the animate module is activated, the ng-show functionality seems to stop working. Even though the default value for the ng-show expression is set to false, the element is still displayed and the ng-hide class is not being applied. However, if I deac ...

Steps to manage the time delay between mousewheel events triggering

Currently, I am working on a website for a movie production company that showcases their various films in full-screen mode. Each video is listed and there is a function that automatically takes the user to the next video when a mousewheel event occurs. How ...

Is it possible to echo a CSS class using PHP?

I have a PHP structure and I would like to embed my div in PHP. I need to write CSS with echo class, but I am unsure of how to do it. Here is my div: <div class="mydiv"> <img src="catalog/view/theme/default/img/mypng.png" alt=""> </div ...

Utilize CSS to position an element absolutely above the scrollbar

I'm encountering an issue with CSS absolute positioning, where the element appears above the scrollbar... Here is my code: document.addEventListener("DOMContentLoaded", () => { const h1 = overflow.querySelector("header h1") overflow.ons ...

Adjusting and arranging multiple thumbnail images within a container of specific width and height

I need a user-friendly method to achieve the following. The thumbnails will not be cropped, but their container will maintain a consistent height and width. The goal is for larger images to scale down responsively within the container, while smaller image ...

Do not display large numbers within an HTML card

I have https://i.sstatic.net/DkowD.png this card here and displaying dynamic data inside it. The number is quite large, so I would like it to appear as 0.600000+. If a user hovers over the number, a tooltip should display the full number. How can I achieve ...

Transition from mouse wheel scroll to page scroll not functioning properly when overflow is enabled

The website has a fixed element that uses overflow:auto. Users can scroll this element by positioning the mouse over it. However, once the element reaches the end of its scroll, the page does not seamlessly take over the scrolling. Instead, there is about ...

Combining arrays using checkboxes in React.js

As someone completely new to coding, my current endeavor involves learning React by developing a flashcard app for studying Japanese. The concept revolves around incorporating a series of checkboxes that facilitate the selection of either Hiragana or Kat ...

Adjusting the size of the snap increments

When using gridstack, I have the ability to resize my widgets. However, I've noticed that when dragging on the widgets' handles, they snap to specific sizes, which seems to be a fixed amount. If I wanted to set the widget's size to something ...

What is the best way to ensure that JavaScript is loaded in a specific sequential order?

I'm having trouble ensuring that JS files load in the correct sequence, despite my efforts to research async and defer on various platforms. This is the structure of my code: <script src="lang.js"></script> <!--loading either ...

Swap out symbols for pictures

To display the 3 icons, I am using https://boxicons.com/. You can find the code here. Additionally, I would like to download the icons and store them in a folder. Here is the result with uploaded images: https://i.sstatic.net/Qsu9k.png I encountered two ...

A guide on retrieving data from an API and displaying it using AngularJS

REACT $state.saveData= function(productfilter){ var url = CONFIG.apiUrl + '/product'; window.open(url); window.print(url); }; CSS <button onClick="saveData(productfilter)" type="button">Print</button> ...

Display item upon hovering and for an extended period upon clicking using jQuery

I am looking to create a functionality where hovering over an area displays item 2 for a certain duration, which is currently working fine with the existing code. However, I also want it to remain visible for a longer period if clicked, but this does not ...

Step-by-step guide to minify Typescript files with Webpack

I am facing an issue in my webpack configuration while trying to minify the output bundle when working with TypeScript. Currently, only one file has been migrated to TypeScript in my project and it works fine with babel-node and the dev bundle without Ugli ...

Customizing button appearances in the control div on Google Maps - A guide

Is there a way to manipulate elements and adjust styles by clicking buttons on the map control div? I want to achieve the same effect on the map as with the buttons in the table. Code: jsFiddle Update: Thanks to your assistance, I was able to achieve th ...

Trying to configure and use two joysticks at the same time using touch events

I have been grappling with this problem for the past two days. My current project involves using an HTML5/JS game engine called ImpactJS, and I came across a helpful plugin designed to create joystick touch zones for mobile devices. The basic concept is th ...

Is there a way to incorporate text at the end of a row in HTML?

I have a photo and some text on my website. The photo is displayed on the left side, while the text appears nicely on the right side. Now, I am looking to include an additional block of text below the existing text. How can I accomplish this? What steps ...

Having trouble generating a readable output bundle due to the following error message: "The entry module cannot be found: Error: Unable to resolve './src/index.js'"

I'm currently working with Webpack version 6.14.8 within an Asp.net Core Razor Pages project in Visual Studio 2019. My objective is to generate a readable output file, and here's the directory structure I've set up: |-->wwwroot -----> ...