CSS/jQuery animation alignment problem

Question

CSS/jQuery animation alignment problem

Exploring an animation using CSS transitions and jQuery has been my recent project. The concept involves presenting the user with clickable divs to load a new page. When a div is clicked, it expands to cover the entire screen and transition to the next page.

A visual representation of my goal is displayed below:

Initially, I arranged the divs with relative positioning and floated them left to align them. However, upon clicking a div, it would snap to the left side before expanding if it wasn't the first one (blue or green). This behavior was a result of the relative positioning.

position: relative;

You can view an example of this behavior here: http://codepen.io/anon/pen/eKynL

To address this issue, I switched to absolute positioning for the divs. The animation functioned flawlessly as intended, but the downside is that I now have to manually set the left and top positions for each div. Additionally, the divs do not automatically reposition when the window is resized.

position: absolute;

You can see an example of this here: http://codepen.io/anon/pen/jIqcL

I am uncertain if there is a better way to enhance my implementation and make it more maintainable, especially regarding the inline styles for the divs.

jquery html css css-animations

Answer 1

Answer №1

I referenced your position:relative; from the source link provided in this CodePen: http://codepen.io/anon/pen/eKynL

$(document).ready(function() {
  $('.mydiv').click(function() {
    if(!$(this).hasClass('clicked')) {
      var clicked_div = $(this);
      clicked_div.addClass('clicked');
      clicked_div.find('h1').fadeOut(150);

      $('.mydiv').not('.clicked').addClass('hide');
      clicked_div.addClass('animate');

      $('.loading').css('opacity', 1);

      setTimeout(function() {
        $('.mydiv').not('.clicked').css('display','none');
        $('.loading').css('opacity', 0);
        clicked_div.addClass('blog-post');
        clicked_div.find('h1').fadeIn(150);
        $('.blog-content').addClass('active');
      }, 1500);
    }
  });
});

*,*:before,*:after {
  box-sizing: border-box;
}
html, body {
  width: 100%;
  height: 100%;
  position: relative;
  padding: 0;
  margin: 0;
  overflow: hidden;
}
.mydiv {
  width: 200px;
  height: 200px;
  background-color: #bada55;
  position: relative;
  float: left;
  left: 0;
  top: 0;
  transition: width 0.5s, height 0.5s, left 0.5s, top 0.5s, opacity 0.25s;
}
.mydiv h1 {
  position: absolute;
  bottom: 0;
  left: 10px;
  color: #fff;
  font-family: sans-serif;
}
.teal {
  background-color: teal;
}
.orange {
  background-color: orange;
}

.mydiv.hide {
  width: 0px;
  height: 0px;
  opacity: 0;
}

.mydiv.animate {
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}

.mydiv.blog-post {
  width: 50%;
}

.blog-content {
  background-color: #efefef;
  width: 50%;
  height: 100%;
  position: absolute;
  right: 0;
  top: 100%;
  transition: top 0.5s;
  font-family: sans-serif;
  color: #3c3c3c;
  font-size: 30px;
  padding: 20px;
}

.blog-content.active {
  top: 0%;
}

.loading {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto 0;
  width: 100%;
  height: 100px;
  text-align: center;
  font-family: sans-serif;
  font-size: 30px;
  font-weight: bold;
  color: #fff;
  opacity: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="mydiv">
  <h1>Green</h1>
</div>
<div class="mydiv teal">
  <h1>Teal</h1>
</div>
<div class="mydiv orange">
  <h1>Orange</h1>
</div>

<div class="loading">Loading...</div>
<div class="blog-content">
  Content
</div>

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

In CSS, the only modification made was:

.mydiv {
  ...
  transition: ..., opacity 0.25s;
}

.mydiv.hide {
  width: 0px;
  height: 0px;
  opacity: 0;
}

In JS,

The line was changed from:

$('.mydiv').not('.clicked').fadeOut(150, function() {

to

$('.mydiv').not('.clicked').addClass('hide');

and this line was added inside the setTimeout-function:

$('.mydiv').not('.clicked').css('display','none');

This is how it functions:

When the clicked div receives the .animate class, the unclicked divs receive the .hide class simultaneously.
As the clicked div expands to fill the page, the other divs diminish in size and opacity to create a smooth effect during the transition.
Eventually, in the setTimeout function, the unclicked divs have their display property set to none, completing the fade-out effect.

Answer 2

I referenced your position:relative; from the source link provided in this CodePen: http://codepen.io/anon/pen/eKynL

$(document).ready(function() {
  $('.mydiv').click(function() {
    if(!$(this).hasClass('clicked')) {
      var clicked_div = $(this);
      clicked_div.addClass('clicked');
      clicked_div.find('h1').fadeOut(150);

      $('.mydiv').not('.clicked').addClass('hide');
      clicked_div.addClass('animate');

      $('.loading').css('opacity', 1);

      setTimeout(function() {
        $('.mydiv').not('.clicked').css('display','none');
        $('.loading').css('opacity', 0);
        clicked_div.addClass('blog-post');
        clicked_div.find('h1').fadeIn(150);
        $('.blog-content').addClass('active');
      }, 1500);
    }
  });
});

*,*:before,*:after {
  box-sizing: border-box;
}
html, body {
  width: 100%;
  height: 100%;
  position: relative;
  padding: 0;
  margin: 0;
  overflow: hidden;
}
.mydiv {
  width: 200px;
  height: 200px;
  background-color: #bada55;
  position: relative;
  float: left;
  left: 0;
  top: 0;
  transition: width 0.5s, height 0.5s, left 0.5s, top 0.5s, opacity 0.25s;
}
.mydiv h1 {
  position: absolute;
  bottom: 0;
  left: 10px;
  color: #fff;
  font-family: sans-serif;
}
.teal {
  background-color: teal;
}
.orange {
  background-color: orange;
}

.mydiv.hide {
  width: 0px;
  height: 0px;
  opacity: 0;
}

.mydiv.animate {
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}

.mydiv.blog-post {
  width: 50%;
}

.blog-content {
  background-color: #efefef;
  width: 50%;
  height: 100%;
  position: absolute;
  right: 0;
  top: 100%;
  transition: top 0.5s;
  font-family: sans-serif;
  color: #3c3c3c;
  font-size: 30px;
  padding: 20px;
}

.blog-content.active {
  top: 0%;
}

.loading {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto 0;
  width: 100%;
  height: 100px;
  text-align: center;
  font-family: sans-serif;
  font-size: 30px;
  font-weight: bold;
  color: #fff;
  opacity: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="mydiv">
  <h1>Green</h1>
</div>
<div class="mydiv teal">
  <h1>Teal</h1>
</div>
<div class="mydiv orange">
  <h1>Orange</h1>
</div>

<div class="loading">Loading...</div>
<div class="blog-content">
  Content
</div>

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

In CSS, the only modification made was:

.mydiv {
  ...
  transition: ..., opacity 0.25s;
}

.mydiv.hide {
  width: 0px;
  height: 0px;
  opacity: 0;
}

In JS,

The line was changed from:

$('.mydiv').not('.clicked').fadeOut(150, function() {

to

$('.mydiv').not('.clicked').addClass('hide');

and this line was added inside the setTimeout-function:

$('.mydiv').not('.clicked').css('display','none');

This is how it functions:

When the clicked div receives the .animate class, the unclicked divs receive the .hide class simultaneously.
As the clicked div expands to fill the page, the other divs diminish in size and opacity to create a smooth effect during the transition.
Eventually, in the setTimeout function, the unclicked divs have their display property set to none, completing the fade-out effect.

CSS/jQuery animation alignment problem

Answer №1

Similar questions

Updating parameter value upon the execution of an internal function in Javascript

PHP Email Form Data Submission

having difficulty grasping the variable's scope within this code

Not all comparisons between two tables are guaranteed to be successful

Running a <script> tag with an external src attribute in a dynamic manner through the use of eval

Invoke a function using the output of a different function

Increase the gap between columns in Bootstrap for a better layout

How can we initiate the AJAX request right away while also making sure the page is fully loaded before adding

I'm having trouble with accessing an object by index in a knockout observablearray. It seems like the binding process is encountering difficulties

Why is it that this particular line of code sometimes gives me an "undefined" result before returning an actual value?

Is the JavaScript progress bar dysfunctional when used with object-oriented JavaScript code, but functions properly with arrow functions?

Tips for locating elements based on the final portion of their identifier using jQuery

Problem with Labels Overlapping and Blocking Text Fields

What is the process for modifying the popups associated with a polygon object?

Compel a WordPress page to reload

Can a Javascript file be concealed from view?

Make sure to load the <img> html tag before implementing js masonry for optimal

"Utilizing Flask to efficiently manage a multitude of buttons and seamlessly update a

Tips for aligning two canvases with different heights at the top in HTML5

What causes the $_FILES superglobal to consistently appear empty?