Line of cubes - tap on a single cube and the others gracefully slide away from view

Question

Line of cubes - tap on a single cube and the others gracefully slide away from view

I am working on a project where I need to create a row of blocks. The goal is for the blocks to slide off the screen when one is clicked, leaving the clicked block in the first position.

For instance:

https://i.sstatic.net/IB5LI.jpg

I attempted using jQueryUI slide effects but encountered some issues. Here is a JS Fiddle showcasing the original configuration of the blocks. Perhaps adjusting their positioning could solve the problem? I also considered moving the blocks off the screen by changing their left distance, but the animation did not turn out as expected.

$('.block').on('click', function() {
    $('.block').not($(this)).hide("slide", { direction: "left" }, 500, function() {
});

javascript jquery css jquery-ui slide

Answer 1

Answer №1

$(document).ready(function(event) {
  $('.tile').each(function(element) {
    $(this).on('click', function() {
      $('.tile').not($(this)).slideUp({direction: 'up'}, 750);
    });
  });
});

To make the slide effect work, remember to add jQueryUi after jQuery in your code.

Answer 2

$(document).ready(function(event) {
  $('.tile').each(function(element) {
    $(this).on('click', function() {
      $('.tile').not($(this)).slideUp({direction: 'up'}, 750);
    });
  });
});

To make the slide effect work, remember to add jQueryUi after jQuery in your code.

Line of cubes - tap on a single cube and the others gracefully slide away from view

Answer №1

Similar questions

XSLT - Dividing table into three columns while maintaining continuity on the same page

"Transform the appearance of the datepicker input field with Material 15's dynamic

What is the best way to include a variable or literal as a value in styled components?

Using Angular to create a dynamic form with looping inputs that reactively responds to user

Modifying multiple heading tags simultaneously with jQuery

The content on the right side is spilling over my footer and causing

Creating a functional hyperlink within a ui-sref element in Ionic

Encountering an issue when making a POST request using JSON data

Tips for iterating through an array of object literals and combining values with matching IDs

The comparison between createElement() and AJAX response

"Border-radius becomes less prominent on pointer interaction in Chrome and Safari due to WebKit's behavior

Transferring the "key" and "values" data from a JSON object to a perl script

"Exploring the process of making a REST call from an Angular TypeScript client to

Encountering Error with NodeJS Typescript: Issue with loading ES Module when running sls offline command

`Angular RxJS vs Vue Reactivity: Best practices for managing UI updates that rely on timers`

Can you explain the purpose of the spaces on the buttons?

Use PipeTransform to apply multiple filters simultaneously

Struggling to implement a seamless scrolling effect using CSSTransition Group

Submitting data using JavaScript's POST method

Validation Express; the error variable is not defined in the EJS