CSS / jQuery animation placement issue

Question

I tested the animation with CSS and jQuery transitions. The idea is that the user is shown a set of interactive sections to load a new page. After clicking the div, it expands to fill the entire screen and “load” the next page.

Below is a layout of what I'm trying to achieve:

, , , div , eachother. , div, "" divs, , , div. , div ( ), "" . , , .

position: relative;

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

, divs . , , , - div , divs .

position: absolute;

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

, , ( div).

Answer 1

position:relative; (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'); //<----CHANGED LINE
      clicked_div.addClass('animate');

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

      setTimeout(function() {
        $('.mydiv').not('.clicked').css('display','none'); //<----NEW LINE
        $('.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; /*<----ADDED 'opacity'*/
}
.mydiv h1 {
  position: absolute;
  bottom: 0;
  left: 10px;
  color: #fff;
  font-family: sans-serif;
}
.teal {
  background-color: teal;
}
.orange {
  background-color: orange;
}

/*-----NEW CODE---------------------------------*/
.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>

Hide result

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

---

CSS :

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

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

JS,

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

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

setTimeout:

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

---

:

• , div .animate, divs .hide.
• , div , , divs ( width/height opacity).
  • width/height divs , div, divs , div /.
  • opacity divs (0,25 ), (-) , (.. divs , div).
• ( setTimeout), divs, display none, .