In jQuery, turn off the hover function while the animation is in progress

I've implemented this jQuery animation:

          $('.menu1').stop().animate({left: "29%", top: '2%', width:'40%', fontSize: '60%'}, 3000);
          $('.menu2').stop().animate({left: "44%", top: '2%', width:'40%', fontSize: '60%'}, 3000);
          $('.menu3').stop().animate({left: "59%", top: '2%',width:'40%', fontSize: '60%'}, 3000);
          $('.menu4').stop().animate({left: "74%", top: '2%', width:'40%', fontSize: '60%'}, 3000);
          $('.menu1').find('.img1').attr("src", "images/botom1.png");
           $('.csoon').fadeToggle( 6000 );

Additionally, here's the hover function:

     $('.menu1').hover(function(){
              $('.menu1').stop(true, true).css('font-size','+=5%');
        }, function(){
            $('.menu1').stop(true, true).css('font-size','-=5%');
 });

A challenge arises when hovering during the animation, causing font-size changes. Is there a way to disable this?

View the code in JSFiddle: https://jsfiddle.net/jy57u25u/

javascriptjqueryhtmlcss

Answer №1

Utilize the unbind() method

$('.menu1').unbind('hover');
$('.menu1').stop().animate({left: "29%", top: '2%', width:'40%', fontSize: '60%'}, 3000);
          $('.menu2').stop().animate({left: "44%", top: '2%', width:'40%', fontSize: '60%'}, 3000);
          $('.menu3').stop().animate({left: "59%", top: '2%',width:'40%', fontSize: '60%'}, 3000);
          $('.menu4').stop().animate({left: "74%", top: '2%', width:'40%', fontSize: '60%'}, 3000);
          $('.menu1').find('.img1').attr("src", "images/botom1.png");
           $('.csoon').fadeToggle( 6000 );

$('.menu1').hover(function(){
              $('.menu1').stop(true, true).css('font-size','+=5%');
        }, function(){
            $('.menu1').stop(true, true).css('font-size','-=5%');
 });

Alternatively, incorporate a flag

var animating = false;
$('.menu1').hover(function() {
    if (!animating) {
        $('.menu1').stop(true, true).css('font-size', '+=5%');
    }
}, function() {
    if (!animating) {
        $('.menu1').stop(true, true).css('font-size', '-=5%');
    }
});
animating = true;
$('.menu1').stop().animate({
    left: "29%",
    top: '2%',
    width: '40%',
    fontSize: '60%'
}, 3000);
$('.menu2').stop().animate({
    left: "44%",
    top: '2%',
    width: '40%',
    fontSize: '60%'
}, 3000);
$('.menu3').stop().animate({
    left: "59%",
    top: '2%',
    width: '40%',
    fontSize: '60%'
}, 3000);
$('.menu4').stop().animate({
    left: "74%",
    top: '2%',
    width: '40%',
    fontSize: '60%'
}, 3000);
$('.menu1').find('.img1').attr("src", "images/botom1.png");
$('.csoon').fadeToggle(6000);
animating = false;

Answer №2

One way to handle this situation is by utilizing a flag variable

$('.menu1').stop().data('my-animation', true).animate({
    left: "29%",
    top: '2%',
    width: '40%',
    fontSize: '60%'
}, 3000, function () {
    $(this).data('my-animation', false)
});

Afterwards,

$('.menu1').hover(function (e) {
    if (!$(this).data('my-animation')) {
        $('.menu1').stop(true, true).css('font-size', e.type == 'mouseenter' ? '+=5%' : '-=5%');
    }
});

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

"Error encountered while trying to perform a JavaScript _doPostBack

In my asp.net application, I have an HTML table where each td element has a unique id. When a td element is clicked, I use JavaScript to store the id in a hidden field. After that, I attempt to trigger _doPostBack from JavaScript to utilize the hidden fiel ...

javascriptjqueryhtmlasp.net

Is a pop-up alert necessary for table modifications?

In my user Badges and Achievements table, the default value for a Badge is set to locked. Once a user unlocks a badge, the field value is changed to unlocked. I am looking for a way to notify the user through a popup message when they unlock a new achiev ...

phpmysqlajaxjquerylogic

struggling to transfer information from JavaScript to Jade within the Node.js environment

Currently, I am retrieving a row from a Cassandra table called "emp". My objective is to pass the data retrieved from the JavaScript file to a Jade file in order to display this information on the user interface. In my JavaScript function: router.get(&a ...

javascriptnode.jsexpresscassandrapug

When transitioning an iOS Swift app to the background, a NodeJS error arises: 'Headers cannot be set after they have been sent to the client'

My app is built using Swift/SwiftUI. I utilize the ObservableObject and JSONDecoder to retrieve data from my Node.JS Express API and display it within the app: struct DevicesList: Decodable { var data: [DeviceInfo] } struct DeviceInfo: Decodable { ...

javascriptiosnode.jsswiftswiftui

React element featuring various interfaces

Currently, I am working on styling a React component in a way that allows for either horizontal or vertical styling without using flexbox. My question is, how can I pass styles down to the component in a way that applies individual styles to the child ele ...

cssreactjs

Storing translations in localStorage on my website to avoid repeatedly loading them each time I revisit the page

Recently, I created a function that loads translations for my website using an ajax request. However, I am now considering optimizing my code so that these translations are saved in localStorage and loaded from there instead of making a request every time. ...

javascriptajaxlocal-storage

Encountered an unforeseen token "<" that is causing the server to return a 404 HTML page instead of the intended .js

I am currently developing a to-do list application using Node.js Express and EJS. In the app, I have implemented a filtering functionality with a URL path of "/filter/query". Based on the selected category (either "lists" or "lastupdated"), the app filters ...

javascripthtmlnode.jsexpressejs

Consistent Errors with AJAX POST Requests Despite CORS Enablement

Here is a function I have created for making an ajax post request: function POST(url, data) { $.ajax({ 'type' : "POST", 'url' : url, 'data' : data, headers : { 'Access-Cont ...

javascriptjqueryajaxcors

Juggling various perspectives in a Backbone assortment

As I develop a Backbone application that includes a section for viewing reports, there are three key components: a menu of report links, the title of the displayed report, and the content of the displayed report. Users are expected to click on a report lin ...

javascriptbackbone.js

Switch Image to Background Image on Mobile Devices

I am currently working on a website that needs a special page for an upcoming event. Typically, the pages on this site have a mast banner image that stretches across the full width of the page. However, for this particular page, it is necessary for the ima ...

cssdrupalresponsive-design

To link circles vertically with a line and fill them with color when clicked, follow these steps:

I am looking to create a design similar to the image below using unordered list items. When a user clicks on a list item, I want the circle to fill with color. I have structured it by creating a div with nested list items and span elements. If a user click ...

javascriptjqueryhtmlcss

Obtaining a result from a jQuery Ajax call

I am exploring the use of JavaScript in an object-oriented style, and have a method that requires making a remote call to retrieve data for a webpage to function properly. To achieve this, I have created a JavaScript class to handle data retrieval in order ...

javascriptjqueryajax

I am attempting to adjust the CSS code so that it does not shrink when clicked on. How can I prevent this from happening?

Here is the element I am attempting to modify. I attempted &:active { flex:7;} but upon releasing the left click button, it reverted back to its original size. I was aiming for something similar to this <h1>Gallery</h1> < ...

htmlcssanimation

Place the delete and edit buttons on the right side of the card

I am trying to align the edit and delete buttons with the image and premise name on the same line. Both buttons should be placed on the right side and have the same size as the card. Currently, the layout looks like this: https://i.sstatic.net/sNikU.png ...

htmlcssbootstrap-5

Constructing a regular expression

I've been exploring JavaScript regular expressions and encountering some challenges while trying to build a larger one. Therefore, I have decided to seek help for the entire problem rather than just individual questions. What I am looking for is a re ...

javascriptregex

Looking for assistance with CSS positioning techniques

Creating a dropdown list with a caret icon for each item is my goal, but I'm facing some challenges. Here's the code snippet of the div structure: <div class="class-to-div1" id="{{ div.id }}" data-cardsnum="{{ div.num }}"> <div clas ...

htmlcss

Don't let noise linger in the background unnoticed

Within my HTML table, there are 32 cells that each possess an onclick="music()" function. This function is currently functioning correctly, with one small exception. I desire for the functionality to be such that whenever I click on a different cell, the m ...

javascripthtml

Did I incorrectly pass headers in SWR?

After taking a break from coding for some time, I'm back to help a friend with a website creation project. However, diving straight into the work, I've encountered an issue with SWR. Challenge The problem I'm facing is related to sending an ...

javascriptnext.jsapi-designswr

Issue with Angular: event.key doesn't register as shft+tab when pressing Shift+Tab key

Our website features a dropdown menu that can be opened and closed by clicking, revealing a list of li items. However, we are currently experiencing an issue with keyboard focus navigation. When the Tab key is pressed, the focus properly moves from one li ...

javascriptangular

The Material-ui Select component is experiencing issues with updating the state accurately

When creating a multiple select input using Material-UI, I encountered an issue with setting the default selected values from state. Despite having an array of two objects in the state and setting it as the select value, the default objects are not being ...

javascriptreactjsreact-hooksmaterial-ui