Begin the div at a width of 0 pixels and expand it towards the right

Question

Begin the div at a width of 0 pixels and expand it towards the right

My current project involves opening a row of blocks with an animation. The desired outcome is to transition from 2 blocks to 3 blocks by clicking a button. Specifically, the block that needs to be added should appear in the middle and fade in from left to right.

However, I am facing two challenges:

The blocks are not aligned on a single line (the first block appears lower).
When I attempt to open the middle block, it opens from bottom to top instead of left to right

The code snippet I used can be found in the JSFiddle
```
$('.openRed').on('click', function (e) {
$('.redHide').toggleClass('redShow').toggleClass('redHide');
```
If this explanation is unclear, please let me know!

jquery html css animation

Answer 1

Answer №1

I revamped the class and animation to align with your intended vision:
please don't hesitate to reach out if you need clarification, there's always room for expanding knowledge ;)

$('.openRed').on('click', function(e) {
  $('.red').toggleClass('show')
});

.blue {
  width: 100px;
  height: 100px;
  background-color: blue;
  display: inline-block;
  vertical-align: top;
}
.red {
  display: inline-block;
  width: 0px;
  height: 100px;
  transition: 0.3s cubic-bezier(0, 1, 0.5, 1);
}
.red.show {
  background-color: red;
  width: 100px;
  transition: 2s ease-in;
}
.yellow {
  width: 100px;
  height: 100px;
  background-color: yellow;
  display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="blue">
  <button class="openRed">
    Open Red
  </button>
</div>
<div class="red"></div>
<div class="yellow"></div>

Answer 2

I revamped the class and animation to align with your intended vision:
please don't hesitate to reach out if you need clarification, there's always room for expanding knowledge ;)

$('.openRed').on('click', function(e) {
  $('.red').toggleClass('show')
});

.blue {
  width: 100px;
  height: 100px;
  background-color: blue;
  display: inline-block;
  vertical-align: top;
}
.red {
  display: inline-block;
  width: 0px;
  height: 100px;
  transition: 0.3s cubic-bezier(0, 1, 0.5, 1);
}
.red.show {
  background-color: red;
  width: 100px;
  transition: 2s ease-in;
}
.yellow {
  width: 100px;
  height: 100px;
  background-color: yellow;
  display: inline-block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="blue">
  <button class="openRed">
    Open Red
  </button>
</div>
<div class="red"></div>
<div class="yellow"></div>

Answer 3

Answer №2

The blocks are not aligned on one single line. (The first block is positioned lower)

For an inline-block element, the baseline is determined by the last line box in the normal flow. This means that alignment is based on the text content within the element. To correct alignment issues, you can add vertical-align: top to ensure proper alignment:

.blue {
  width: 100px;
  height: 100px;
  background-color: blue;
  display: inline-block;
  vertical-align: top;
}

When I click to open the middle block, it expands from bottom to top instead of left to right (I want it to go from left to right).

To achieve a horizontal expansion effect, transition the width property instead of the height. Set the initial height to 100px and specify that the transition should only affect the width:

View Updated Example

transition: 2s width ease-in;

Additional Note(s):

You don't need to use the .toggleClass() method twice; simply define both classes.

$('.openRed').on('click', function(e) {
  $('.redHide').toggleClass('redShow redHide');
});

However, toggling just the redShow class is sufficient:

$('.openRed').on('click', function(e) {
  $('.redHide').toggleClass('redShow');
});

You can also utilize the shorthand notation for transitions:

For example:

transition: 2s width ease-in;

Answer 4

The blocks are not aligned on one single line. (The first block is positioned lower)

For an inline-block element, the baseline is determined by the last line box in the normal flow. This means that alignment is based on the text content within the element. To correct alignment issues, you can add vertical-align: top to ensure proper alignment:

.blue {
  width: 100px;
  height: 100px;
  background-color: blue;
  display: inline-block;
  vertical-align: top;
}

When I click to open the middle block, it expands from bottom to top instead of left to right (I want it to go from left to right).

To achieve a horizontal expansion effect, transition the width property instead of the height. Set the initial height to 100px and specify that the transition should only affect the width:

View Updated Example

transition: 2s width ease-in;

Additional Note(s):

You don't need to use the .toggleClass() method twice; simply define both classes.

$('.openRed').on('click', function(e) {
  $('.redHide').toggleClass('redShow redHide');
});

However, toggling just the redShow class is sufficient:

$('.openRed').on('click', function(e) {
  $('.redHide').toggleClass('redShow');
});

You can also utilize the shorthand notation for transitions:

For example:

transition: 2s width ease-in;

Answer 5

Answer №3

Are you looking for something like this: https://jsfiddle.net/h3dgfe2w/

body{
  display: inline-block;
}

.row{

}

.block {
  float:left;
  margin-left:5px;
}

.blue {
  width:100px;
  height: 100px;
  background-color: blue;
  display: inline-block;
}

.red {
    display: inline-block;
    overflow: hidden;
    height: 100px;
    width: 0px;
    background-color: red;
    visibility: hidden;
}
.yellow {
  width:100px;
  height: 100px;
  background-color: yellow;
  display: inline-block;
}


@-webkit-keyframes slideInLeft {
  from {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideInLeft {
  from {
    width: 0px;
    visibility: visible;
  }

  to {
    width: 100px;
  }
}

.slideInLeft {
  -webkit-animation-name: slideInLeft;
  animation-name: slideInLeft;
  visibility: visible;
}


.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

Answer 6

Are you looking for something like this: https://jsfiddle.net/h3dgfe2w/

body{
  display: inline-block;
}

.row{

}

.block {
  float:left;
  margin-left:5px;
}

.blue {
  width:100px;
  height: 100px;
  background-color: blue;
  display: inline-block;
}

.red {
    display: inline-block;
    overflow: hidden;
    height: 100px;
    width: 0px;
    background-color: red;
    visibility: hidden;
}
.yellow {
  width:100px;
  height: 100px;
  background-color: yellow;
  display: inline-block;
}


@-webkit-keyframes slideInLeft {
  from {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideInLeft {
  from {
    width: 0px;
    visibility: visible;
  }

  to {
    width: 100px;
  }
}

.slideInLeft {
  -webkit-animation-name: slideInLeft;
  animation-name: slideInLeft;
  visibility: visible;
}


.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

Begin the div at a width of 0 pixels and expand it towards the right

Answer №1

Answer №2

Answer №3

Similar questions

JavaScript - Toggling checkboxes to either be checked or unchecked with a "check all" option

Using CSS to center the text and adding a separator line in blank spaces for a clean and stylish look

I need to prevent form submission when the submit button is clicked. How can I achieve this?

Using jQuery to dynamically change button icons when clicked

The dual-file upload feature of the jQuery ajaxForm plugin

issue with splice function

Tips for creating a 3D illusion by coding a div or object to rotate around another object or div

Troubleshooting the malfunctioning Ajax Post in Asp.net Core with .Net 6 Action method

Using Ajax to implement Basic Authentication for securely accessing an https-protected webpage without requiring users to manually enter their username and password in a

Steps for modifying the CSS style of a div element following an onclick event:

The jQuery bookmarklet in the djangobyexample book is completely unresponsive

Trouble with the query waypoints extension in a simple demonstration

Injecting services differently in specific scenarios in AngularJS

Additional <li> elements are created in Internet Explorer versions 8 and 9

Challenges with synchronizing the scope of global arrays when reading JSON files into objects

I encountered an issue where my button's onClick function was not functioning properly with the clickable component

What is the reason behind the varying display of values?

Inject JSON data into a jQuery plugin

Having trouble applying CSS styles to the root element despite using a CSS file

Ways to include scrolling specifically for one template