Incorrect sequence detected in JQuery animation execution

Question

Incorrect sequence detected in JQuery animation execution

I'm currently developing a game called 'Pointless', inspired by the popular UK game show of the same name. In the game, there is a countdown that starts at 100 and decreases to display the team's score. I'm attempting to recreate this feature in my game. For reference, you can watch a clip from the show here.

However, I'm encountering an issue where the entire countdown executes simultaneously instead of revealing one element at a time as intended. I need to figure out how to hide each div separately.

You can view the code I'm using on this JSFiddle.

for (var i = 0; i <= 10 ; i++) {
    $('#' + i).toggle('slide');
}

javascript jquery html css

Answer 1

Answer №1

When using jQuery's `toggle` or other animation functions, the code does not get blocked. The animation runs concurrently with the rest of the code execution. To introduce a delay before starting each block of animation, you can utilize the `delay` function.

For example, check out this demo:

Moreover, I recommend using .slideToggle('slow') instead of .toggle('slide').

$('#' + i).delay(i*100).slideToggle('slow');

Answer 2

When using jQuery's `toggle` or other animation functions, the code does not get blocked. The animation runs concurrently with the rest of the code execution. To introduce a delay before starting each block of animation, you can utilize the `delay` function.

For example, check out this demo:

Moreover, I recommend using .slideToggle('slow') instead of .toggle('slide').

$('#' + i).delay(i*100).slideToggle('slow');

Answer 3

Answer №2

After running through the entire for-loop, it is discovered that the .toggle() events (including others) are actually enqueued and triggered. This means that even if they were not, calling toggle on all elements simultaneously will result in them toggling at the same time. One workaround is to implement a timer using functions like setInterval or setTimeout:

$('#Go').click(function(){
  var i = 0;
  var timer = setInterval(function(){
      i++;
      $('#' + i).toggle('slide');
      if(i > 10) clearInterval(timer);
    },100)
})

Check out this Fiddle Example

Answer 4

After running through the entire for-loop, it is discovered that the .toggle() events (including others) are actually enqueued and triggered. This means that even if they were not, calling toggle on all elements simultaneously will result in them toggling at the same time. One workaround is to implement a timer using functions like setInterval or setTimeout:

$('#Go').click(function(){
  var i = 0;
  var timer = setInterval(function(){
      i++;
      $('#' + i).toggle('slide');
      if(i > 10) clearInterval(timer);
    },100)
})

Check out this Fiddle Example

Answer 5

Answer №3

Amir's solution is excellent. I just want to make a small addition:

The toggle method in jQuery does not accept any argument with the value of slide. Here is the correct syntax:

$(selector).toggle(speed, easing, callback)

speed: [milliseconds, "slow", "fast"]
easing: ["swing", "linear"] (Additional easing functions can be found in external plugins)
callback: a function

Answer 6

Amir's solution is excellent. I just want to make a small addition:

The toggle method in jQuery does not accept any argument with the value of slide. Here is the correct syntax:

$(selector).toggle(speed, easing, callback)

speed: [milliseconds, "slow", "fast"]
easing: ["swing", "linear"] (Additional easing functions can be found in external plugins)
callback: a function

Incorrect sequence detected in JQuery animation execution

Answer №1

Answer №2

Answer №3

Similar questions

Creating a new column in a DataTable dynamically after an Ajax request in an MVC environment

What is the process for adding a JavaScript banner using JavaScript code?

Node.js MySQL REST API query fails to execute

What could be causing wavesurferjs to exceed the boundaries of its parent div?

Troubleshooting Problems with Jquery Datatables Resetting

Having trouble getting the JavaScript slider to animate

Are backbone models causing hiccups in productivity?

Using jQuery to modify a CSS property when a specific option is chosen

Enhancing OpenAI API Responses with WebSocket Streaming through Express Middleware Integration

Hiding and displaying DIVs on a single HTML page using VueJs 2

The onChange function does not seem to be functioning properly within the Reactstrap customized input switch

Error: 'require' is undefined in react.production.min.js during production deployment

The background of the webpage section is being cropped on mobile devices

Styling a Fixed Header in CSS/HTML - Scroll Effect

What is the best way to showcase a non-image file that is stored in MongoDB (using GridFS) on a webpage?

Learn the simple process of resetting a form with the input type reset functionality

A row divided into three segments in Twitter Bootstrap2, with the second segment spanning the rest

Is it possible to simultaneously run multiple functions with event listeners on a canvas?

Center sidenav material 2 in alignment

Center php div within a form