Implementing a queue with an on-click event

Question

Implementing a queue with an on-click event

As a self-proclaimed Java nerd diving into the world of jQuery, I'm facing some challenges.

My goal is to create 3 interactive boxes that behave in a specific way: when clicked, one box should come forward while the other two dim and stay in the background. However, I want to implement a queue system so that if multiple boxes are clicked consecutively, they only move forward once the previous animation ends. Right now, everything seems to be happening simultaneously instead of in order.

I've tried using callbacks and deferred methods without success.

Below is the current Javascript code:

var zindex = 1;

$('.box_listener').click(function() {

  $(this).css('z-index', zindex += 1);
  $(this).siblings('.box_listener').fadeTo(3000, 0.5);
  $(this).fadeTo(1, 1);
});

Here is the JSFiddle link for reference:

https://jsfiddle.net/asger/5yvvgoda/14/

Cheers, and any help would be greatly appreciated!

javascript jquery html css

Answer 1

Answer №1

For a more robust solution, consider avoiding jQuery animations and utilizing CSS transitions instead. This approach offers two main advantages: CSS transitions can be easily reversed and they can benefit from GPU acceleration. Additionally, it eliminates the need to artificially delay user input until the animation completes.

To implement this method, create two CSS classes: one defining the transition properties for the elements to be animated, and the other altering the values on the element to trigger the transition. Then, simply use jQuery's addClass() and removeClass() functions to initiate the transitions.

See below for a practical example with key points highlighted in comments.

$('.btn').on('click', function() {
  // Remove 'active' class from all buttons to reverse the transition
  $('.btn').removeClass('active');
  // Apply 'active' class only to the clicked button to start the transition
  $(this).addClass('active');
});

.btn {
  display: block;
  width: 200px;
  padding: 10px 20px;
  margin-bottom: 5px;

  background: cornflowerblue;
  border: 0;
  cursor: pointer;
  
  /* Set up a transition for CSS transformations like translation, scaling, rotation, etc. */
  transition: transform 300ms ease-in-out;
}

/* Adding this class will scale the button while the existing transition ensures smooth scaling */
.active {
  transform: scale(1.2);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Click the buttons</h2>

<button class="btn">First</button>
<button class="btn">Second</button>
<button class="btn">Third</button>

Answer 2

For a more robust solution, consider avoiding jQuery animations and utilizing CSS transitions instead. This approach offers two main advantages: CSS transitions can be easily reversed and they can benefit from GPU acceleration. Additionally, it eliminates the need to artificially delay user input until the animation completes.

To implement this method, create two CSS classes: one defining the transition properties for the elements to be animated, and the other altering the values on the element to trigger the transition. Then, simply use jQuery's addClass() and removeClass() functions to initiate the transitions.

See below for a practical example with key points highlighted in comments.

$('.btn').on('click', function() {
  // Remove 'active' class from all buttons to reverse the transition
  $('.btn').removeClass('active');
  // Apply 'active' class only to the clicked button to start the transition
  $(this).addClass('active');
});

.btn {
  display: block;
  width: 200px;
  padding: 10px 20px;
  margin-bottom: 5px;

  background: cornflowerblue;
  border: 0;
  cursor: pointer;
  
  /* Set up a transition for CSS transformations like translation, scaling, rotation, etc. */
  transition: transform 300ms ease-in-out;
}

/* Adding this class will scale the button while the existing transition ensures smooth scaling */
.active {
  transform: scale(1.2);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Click the buttons</h2>

<button class="btn">First</button>
<button class="btn">Second</button>
<button class="btn">Third</button>

Implementing a queue with an on-click event

Answer №1

Similar questions

In need of assistance with posting data on a Captive Portal using Ruckus AccessPoint Javascript

Strange Node.js Issue

Learning the basics of JavaScript: Displaying the last number in an array and restarting a function

What is the best way to retrieve the title element from a loaded iframe?

Three.js - Controlling Visibility of Text in troika-three-text with Clipping Planes

Problems with Material UI autocomplete causing destruction of Redux-form values

What is the best way to target an HTML element that is only connected to a particular class?

Suggestions to reduce our website loading time

Create a dynamic design with Angular Material's mat-drawer at full height using flexbox, allowing content

Creating a unique styleset in styled-jsx using custom ruleset generation

The website is displaying a strange mix of text and HTML when viewed on a PC

The chosen value remains constant even after altering the selected option

Is it possible to transfer data from a JavaScript file to the Express server without relying on a form submission?

using css to pass arguments

Display a loading image as a placeholder while the Block is loading on the Viewport

Tips for setting up Craigslist email forwarding through Node.js (receiving emails to a dynamically generated email address and redirecting them)

Is there a notification system that sparkles like a precious Facebook gem

Embark on a journey through a preorder traversal of a Binary Tree using TypeScript

Can the state be determined by the presence of other objects in the state?

What is the best way to restrict a link to only a specific div element and not a Bootstrap