The smoothness of jQuery animations is not consistent

Question

The smoothness of jQuery animations is not consistent

I've been working on mastering the art of scheduling animations using JavaScript, in particular with the assistance of jQuery. In an attempt to create a blinking effect for some h1 tags, I noticed that the animation was not running smoothly. It would pause intermittently before continuing.
The main animation code snippet is as follows:

function animSlideHeading() {
  $('.slide h1').animate({
    opacity: .6
  }, 500, 'swing', function() {
    $('.slide h1').animate({
      opacity: 1
    }, 500, 'swing', animSlideHeading);
  });
}

Check out this JSBin example.

javascript jquery html css animation

Answer 1

Answer №1

When selecting elements with the selector $('.slide h1'), the callback function is triggered multiple times, once for each animated element. This results in animSlideHeading running repeatedly and causing issues as it progresses.

A solution to this problem is to utilize promises that resolve when all animations for the elements in the collection are completed collectively.

function animSlideHeading() {
    $('.slide h1').animate({
        opacity: 0.6
    }, 500, 'swing').promise().done(function () {
        $(this).animate({
            opacity: 1
        }, 500, 'swing').promise().done(animSlideHeading);
    });
}
animSlideHeading();

FIDDLE

Answer 2

When selecting elements with the selector $('.slide h1'), the callback function is triggered multiple times, once for each animated element. This results in animSlideHeading running repeatedly and causing issues as it progresses.

A solution to this problem is to utilize promises that resolve when all animations for the elements in the collection are completed collectively.

function animSlideHeading() {
    $('.slide h1').animate({
        opacity: 0.6
    }, 500, 'swing').promise().done(function () {
        $(this).animate({
            opacity: 1
        }, 500, 'swing').promise().done(animSlideHeading);
    });
}
animSlideHeading();

FIDDLE

The smoothness of jQuery animations is not consistent

Answer №1

Similar questions

Steps for setting up node-openalpr on a Windows 10 system

Is it within the realm of possibility for a user to access and peruse the contents of this

Activate Span element when image is clicked

Retrieving a particular div element from a different webpage using Javascript/jQuery

In certain browsers, the link changes color to white

Issues with NativeScript WebView displaying HTML file

Tips for eliminating the empty element from a JavaScript array

Error: The server instance pool has been terminated, requiring enhancements to the existing solution

Images located in the "/images" folder are not being properly served as the URL is being interpreted as relative to the "/css" directory

Tips for concealing a class within JavaScript

Help! I can't seem to figure out how to detect offline status in JavaScript

Issues with Bootstrap display not functioning as expected on mobile device in live environment

Generating a bullet list from an array of objects

Is it safe to securely store connection credentials in javascript?

The div is fully visible

I am encountering an issue with selectpicker where the data from the database is automatically being displayed as selected options. I am seeking to make edits to the

Why is the preloaded resource being reloaded?

Tailwind CSS styling appears to be malfunctioning in the production build of Next.js, despite functioning correctly in the

Column Flow in CSS Grid: Maximizing Auto-Fit - How to Optimize Row Layouts?

Sending Parameters from the Client-Side using Node.js