Preventing the stacking of numerous animations triggered by jquery events

Hey there! I'm currently working on a webpage and utilizing the Transit library for 3D rotations and other CSS transformations. On this page, I have three links that are set to scale up by 1.2 times when hovered over. Everything seems to be working well until I quickly move my mouse back and forth over the link multiple times. Instead of the animation occurring just once, it plays repeatedly based on how many times I hover over it. How can I ensure that regardless of how many times the mouse interacts with the div, the animation only occurs once (sort of like a prolonged hover effect)?

Do you get what I mean?

Here's the website link: LINK

Below is the jQuery code snippet:

//Just so you know, the ID of the div is "rotater"    
$(function(){  
                $('#background').hide(); 
                $( "#banner").hide();
                $( "#rotater").hide();
                $( ".tab" ).hide();
                $( ".content" ).hide();
                $( "#share" ).hide();
                $( ".sidenav").hide();
                $("#navigation").animate({top:"100%"});
                window.setTimeout(function(){$('#banner').fadeIn('slow');$("#navigation").animate({top:"0"});
                                             $('#background').fadeIn('slow');
                                             $("#rotater").fadeIn("fast").transition({rotateY:360, duration:3000});
                                            $( "#share" ).fadeIn("slow");$(".sidenav").fadeIn("slow");
                                            $("#ha").animate({top:"25%",left:"3%"});$("#do").animate({top:"45%",left:"3%"});
                                            $("#set").animate({top:"65%",left:"3%"});$("#net").animate({top:"25%",left:"75%"});
                                            $("#dasu").animate({top:"65%",left:"75%"});}, 1000);
                $( ".sidenav" ).hover(function(){$("#"+this.id).transition({scale:1.2});}, function(){$("#"+this.id).transition({scale:1});}); // THIS IS THE CODE IN QUESTION
                $( "#share" ).hover(function(){$( "#share" ).animate({left:"0%"});}, function(){$( "#share" ).animate({left:"-15%"});});
                var cw = $('#rotater').width();
                $('#rotater').css({'height':cw+'px'});
                setInterval(function(){$("#rotater").transition({rotateY:'+=360deg', duration:3000});},10000);

            });
            $(window).load(function() {
               $(".loader").fadeOut("slow");
            })
jqueryhtmlcssanimation

Answer №1

If you wish to prevent multiple jQuery animations from running sequentially, it is important to include $(yourObj).stop() before starting each animation. The arguments within .stop(a, b) can be utilized to determine the behavior - whether the current animation should halt where it is and allow the new one to begin from that point, or if it should jump to the end state before the next animation commences.

Refer to the jQuery documentation for .stop() for a more comprehensive explanation. Oftentimes, the recommended approach is:

$(yourObj).stop(true, true);

This code snippet will advance the previous animation to its conclusion and remove it from the queue, enabling the subsequent animation to start immediately as though the initial one had already finished. It is advisable to incorporate this prior to every jQuery animation that may potentially be triggered before the preceding one finishes executing.

As an illustration, consider the following scenario:

$( "#share" ).hover(function(){
    $( "#share" ).animate({left:"0%"});
}, function(){
    $( "#share" ).animate({left:"-15%"});
});

This can be modified to:

$( "#share" ).hover(function(){
    $( "#share" ).stop(true, true).animate({left:"0%"});
}, function(){
    $( "#share" ).stop(true, true).animate({left:"-15%"});
});

In specific cases, setting the 2nd argument to true may not be necessary (in which case .stop(true) can suffice instead of .stop(true, true)). Depending on the particular operation and desired functionality, you may opt for the current animation to stop at its current position and allow the new animation to resume from there instead.

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

Tips for ensuring the .selected class remains on the correct a(href) after a page reload in a list of hrefs

Every time I click on a link in my sidebar, the list of links reloads. However, when I move to the next page, the "selected" class goes back to "all" instead of staying on the chosen link. I've looked at explanations for tabs, but I couldn't get ...

javascriptjquerynode.jspughref

Having trouble with this 'string', need assistance with the syntax error

I have the following code snippet: $fq.=" + (fritidsboende_uth_from:[$fritids_uth_from TO *] AND fritidsboende_uth_to:[* TO $fritids_uth_to]) OR (fritidsboende_uth_from:'1972-01-01T01:01:00Z' AND fritidsboende_uth_to:'2019-01-01T01:01:00 ...

phphtmlstring

I aim to arrange three div elements in a single row with varying widths - placing one on the left, another in the center, and the last

I am trying to have three div elements in one row with different widths - one on the left, one in the center and one on the right. The left div should be 160px The center div should be 640px The right div should be 160px My goal is for them to appear se ...

csshtml

What is the best way to allocate a unique color to every item within an array?

I've been working on some JavaScript code that pulls a random color from a selection: const colors = [blue[800], green[500], orange[500], purple[800], red[800]]; const color = colors[Math.floor(Math.random() * colors.length)]; Within my JSX code, I ...

javascriptcssreactjscolors

Increase the size of the embedded iframe in your Cordova application by using the pinch-to-zoom

I have been struggling with this issue for the past few days and am having trouble finding a solution.. I am trying to figure out how to embed an iframe in a cordova app (running on an iOS device) to display an external webpage while allowing users to pin ...

javascripthtmlioscordovaiframe

Is there a more efficient approach to applying a basic function to multiple elements within a DIV and having it activate only upon a click event using jQuery?

This solution works, but I am looking for a more professional approach in order to adhere to the principle of "don't repeat yourself." $("document").ready(function(){ $(".child").each(function(index){ $(this).click(func ...

htmljquerycsscss-selectors

Angular 4: Conditional CSS classes causing issues with transitions

After scouring through stackoverflow, I have yet to find a solution to my current issue. I am utilizing a conditional class on a div that is applied when a boolean variable becomes true. Below is the code snippet in question: <div [class.modalwindow-sh ...

htmlcssangulartypescript

Comparing AngularJS HTTP with jQuery AJAX

In my attempt to send a POST request with parameters to a web service, I encountered some differences in the payload generated by Ajax and AngularJS. With Ajax: $.post("http://myWS",{name:"xxx",surname:"yyy"},function(response){ console.log(response); ...

javascriptjqueryajaxangularjs

Custom component not rendering expected CSS style

I have successfully developed a custom web component without using any framework. I then proceeded to populate it with content from a template tag. Although I was able to manipulate the content using JavaScript, I encountered difficulties when trying to m ...

javascriptcsstypescriptweb-componentnative-web-component

What is the best way to enhance the class following this condition in JavaScript?

Initially, the original script worked perfectly with just one class being added: function check_btn_charge() { if (parseInt(jQuery(".total-change-price").text()) >= 0) { jQuery(".btn-action-save-charge"+"&nbsp;"+"btn-danger" ...

javascriptjquerycssclass

4 innovative ways to customize internal CSS in Bootstrap

I'm just starting out with bootstrap and I could really use some guidance on how to customize it. I managed to create a sample site, but I'm struggling to make modifications beyond the basic bootstrap settings. I have a "container" with blue font ...

htmlcssbootstrap-4

Is there a way to store mathematical equations in a database efficiently?

My website is built in Asp.net and I am utilizing MySql as my database. I have several sample math papers saved in Microsoft Office Word format. What I need is an HTML input tool, such as a textbox or editor, that will allow me to directly copy mathematica ...

htmlasp.netdatabasematheditor

Create geometric designs using HTML and CSS

Looking to customize the positioning of an image inside a rectangle. The goal is to remove the icon border from a specific location and place it in the top left corner of the rectangle using css and html with bootstrap5. Currently, the image is not alignin ...

htmlcssimagebootstrap-5

Locate the present position of the slider element

I am currently in the process of creating a website that features pages displayed in a slider format. Each page has its own unique ID, but all share a common class called 'section'. However, I am encountering difficulty in identifying the ID of t ...

javascriptjqueryhtmlslider

Is it possible to determine if the selected/clicked element is a multiple of "n" using jQuery?

If I have 'n' li elements within a ul, I am looking to trigger an alert message only when the li item that is selected or clicked on is a multiple of "n" (for example 3). In this scenario, the alert should only appear if I click on the 3rd, 6th, ...

javascriptjqueryhtmlcss-selectorsjquery-selectors

forward to a different link following the backend script execution

I am facing a challenge with the signup.php page which includes a Facebook login button. The structure of the page is as follows: <?php if(!isset($_SESSION['logged_in'])) { echo '<div id="results">'; echo '<!-- ...

javascriptphpjqueryajaxfacebook

choose a CSS class within a div element's class name

Hey there, I'm dealing with two HTML divs that both have the same price class of "uvp uvp-price". <div class="product-detail-price-container"> <meta itemprop="price" content="119.8"> ...

htmlcss

What steps are involved in uploading data to serve as a filter while running a PHP script to retrieve data from an SQL database?

Currently, I am retrieving data from a PHP file using miniAjax. The code snippet below demonstrates how the process begins: microAjax("genjsonphp.php", function(data) { var json = JSON.parse(data); var points = json; //code continues In the c ...

javaphpjavascripthtmlajax

Finding the exact location of a specific element within a div: tips and tricks

Is there a way to determine the position of an image inside a div when clicked? Here is my HTML code: <div> <p>test</p> <img src='test1.jpg'/> <p>test</p> <p>test</p> <img src=&ap ...

javascriptjquery

The height of the first item in the navigation menu seems oddly disproportionate

I've been struggling for nearly an hour to make my navigation menu visually appealing. I'm utilizing Twitter Bootstrap's flat CSS menu. Oddly, the first item in the menu appears taller than all the other items in the list - you can see it h ...

htmlcsstwitter-bootstrap