Change the direction of the div animation from horizontal to vertical

Question

Change the direction of the div animation from horizontal to vertical

I have a bunch of divs with fixed dimensions that float horizontally, but I want them to animate vertically once one of them is clicked. Looking for a simple plugin or some code help!

Example:

|-------| |-------| |-------| 
|   1   | |   2   | |   3   | <-- When Box 1 is clicked, boxes 2 and 3 should animate
|_______| |_______| |_______|     vertically instead of their current horizontal alignment.
              |                   The animation does not need to be straight - they can move
|-------|     V         |         over or on top of each other as long as it goes from
|   2   |   <--         |         horizontal to vertical orientation.
|_______|               |
                        |
|-------|               V
|   3   |      <----
|_______|

javascript jquery css

Answer 1

Answer №1

Creating scripts like this is always a fun challenge. For those experiencing issues with JSFiddle, feel free to check out the codepen version:

http://codepen.io/anon/pen/yIhDK

Here's the code for future reference:

HTML:

<div id="boxcontainer">
  <div class="box box1"></div>
  <div class="box box2"></div> 
  <div class="box box3"></div>
</div>

CSS:

#boxcontainer {
  position: relative;
}
.box {
  width: 182px;
  height: 182px;
  border: 5px solid black;
  margin: 5px;
  float: left;
  position: relative;
}

JS:

$(function(){
  $(".box1").click(function(){
    $(".box").each(function(){
      var width = $(this).outerWidth(true),
          height = $(this).outerHeight(true),
          nrTop = Math.floor($(this).position().top / height),
            nrLeft = Math.floor($(this).position().left / width),
          top = (nrLeft-nrTop)*height,
          left = (nrTop-nrLeft)*width;
      console.log(width, height, nrTop, nrLeft, top, left);
      $(this).animate({
        "top": "+="+top+"px",
        "left": "+="+left+"px"
      }, "slow");
    });
  });
});

The concept behind it is to calculate the position of a box from the left and place it that distance from the top (and vice versa).

Answer 2

Creating scripts like this is always a fun challenge. For those experiencing issues with JSFiddle, feel free to check out the codepen version:

http://codepen.io/anon/pen/yIhDK

Here's the code for future reference:

HTML:

<div id="boxcontainer">
  <div class="box box1"></div>
  <div class="box box2"></div> 
  <div class="box box3"></div>
</div>

CSS:

#boxcontainer {
  position: relative;
}
.box {
  width: 182px;
  height: 182px;
  border: 5px solid black;
  margin: 5px;
  float: left;
  position: relative;
}

JS:

$(function(){
  $(".box1").click(function(){
    $(".box").each(function(){
      var width = $(this).outerWidth(true),
          height = $(this).outerHeight(true),
          nrTop = Math.floor($(this).position().top / height),
            nrLeft = Math.floor($(this).position().left / width),
          top = (nrLeft-nrTop)*height,
          left = (nrTop-nrLeft)*width;
      console.log(width, height, nrTop, nrLeft, top, left);
      $(this).animate({
        "top": "+="+top+"px",
        "left": "+="+left+"px"
      }, "slow");
    });
  });
});

The concept behind it is to calculate the position of a box from the left and place it that distance from the top (and vice versa).

Change the direction of the div animation from horizontal to vertical

Answer №1

Similar questions

Using pre-existing CSS state background colors in GTK3

Expanding a website banner slide to fill the entire width of the page

Comparison Between Object and Array

ways to retrieve information from a JavaScript array in jade

Learn how to dynamically populate a select2 dropdown with values retrieved from a database using JavaScript or jQuery

Preventing window resize from affecting print screen content in Angular 8

Enhancing unique designs

Execute a function multiple times within a loop

sending an index parameter to a namespaced array in JavaScript

The line break is being disregarded by jQuery's insertBefore function

Experiencing issues with this.$refs returning undefined within a Nuxt project when attempting to retrieve the height of a div element

Calculating the position of an element in an array passed from a separate file with ReactJS and Ant Design

Having trouble uploading images on Wordpress?

There is a misconception about how javascript .map() can alter the original array rather than simply creating a modified version of it

Leveraging reframe.js to enhance the functionality of HTML5 video playback

What steps can be taken to customize the default keyboard shortcuts functionality in Swiper.js?

Automatically expand a child node in the tree menu

Is there a way to change the fill color of an SVG circle using Thymeleaf?

Discovering the location within a polygon utilizing a geojson file through the use of jQuery

The challenge of div placement was causing distress