Divs animated with jQuery keep on moving even after the animation has finished

Question

Divs animated with jQuery keep on moving even after the animation has finished

My current project involves animating a single circle that scales, collides with two nearby circles, and then causes those circles to animate to specific positions. While everything works as expected, there is an issue where the two circles involved in the collision will continue to move slowly away from the main circle even after the animation has finished. I attempted to use .stop(true,true) on the animate function for the middle circle (referred to as 'boss' in my code), but this only prevents the circle from growing without solving the movement issue of the other circles. Additionally, using .finish() on the boss growth animation did not resolve the problem of the other circles continuing to move post-animation.

FIDDLE: http://jsfiddle.net/direlelephant/fMLKZ/2/

UPDATE: This issue persists regardless of whether the position of the divs is set to fixed or absolute.

UPDATE: I also experimented with using .clearQueue(), .stop(true,false), and stop(true) to address the ongoing movement problem. However, .clearQueue() had no effect, while both .stop(true,false) and stop(true) prevented the middle circle from animating altogether.

javascript jquery css animation jquery-animate

Answer 1

Answer №1

The issue at hand is the creation of animations within a loop structure. It would be beneficial to modify your code snippet with the following:

 if ( distanceformula( xcoord3, xboss, ycoord3, yboss ) < ((boss.outerWidth() / 2) + (objectify3.outerWidth() / 2)) ) {
              console.log(1)
              $( objectify3 ).animate( {
                left: xmove3 + "px",
                top: ymove3 + "px"
              }, {
                duration:3000,
                step: function() {
                  console.log(2)                  
                }
              });

            }

After making this adjustment, check the console output. You will notice that approximately 1000 animations are being created as indicated by the repeated execution of console.log(1). This results in jQuery sequentially running 1000 animations one after another, leading to a total duration of ~1000 * 3000 seconds for all animations to complete. To address this, introducing a flag mechanism can ensure that animations only run once upon the initial intersection.

Answer 2

The issue at hand is the creation of animations within a loop structure. It would be beneficial to modify your code snippet with the following:

 if ( distanceformula( xcoord3, xboss, ycoord3, yboss ) < ((boss.outerWidth() / 2) + (objectify3.outerWidth() / 2)) ) {
              console.log(1)
              $( objectify3 ).animate( {
                left: xmove3 + "px",
                top: ymove3 + "px"
              }, {
                duration:3000,
                step: function() {
                  console.log(2)                  
                }
              });

            }

After making this adjustment, check the console output. You will notice that approximately 1000 animations are being created as indicated by the repeated execution of console.log(1). This results in jQuery sequentially running 1000 animations one after another, leading to a total duration of ~1000 * 3000 seconds for all animations to complete. To address this, introducing a flag mechanism can ensure that animations only run once upon the initial intersection.

Divs animated with jQuery keep on moving even after the animation has finished

Answer №1

Similar questions

Guidelines on creating actionable functions using JavaScript

How can I send a form without having the page reload using a combination of AJAX, PHP

When designing responsive websites in Bootstrap 4, what is the preferred choice between using the class "container" or "container-fluid"?

Dynamically loading an iFrame source and automatically populating input forms using Javascript explained

Could you assist me in retrieving information from an API request?

Need help aligning content with flexbox? Having trouble with align-content and justify-content not working correctly?

AngularJS - Multi-controller Data Calculation

Transmitting data from the front end to the server in React/Shopify for updating API information using a PUT request

What is the best practice for incorporating CSS and JavaScript files into a PHP template?

The AJAX email submission form is not functioning properly

What is the most efficient and hygienic method for storing text content in JavaScript/DOM?

Having trouble persisting drop down values to the database in Symfony2 when utilizing ajax

Increase the margin for the following item if it has a specific class using CSS

Cross-Origin Resource Sharing (CORS): The preflight request response does not satisfy the access control check

Troubles with proper functionality of antd's DatePicker.RangePicker within a React Function Component

How to Use AJAX to Read a Text File in JavaScript

Passing a variable to a template in Node.js and express with hbs is causing an unexpected identifier error

Utilizing Material UI Pickers and Formik to efficiently handle Date, Time, and Second components

Transferring data from JavaScript to PHP using the $.ajax method for storing information in a MySQL database

fixed divs that remain in place while scrolling