Anthony Kong February 2016

Cannot hide the underlying div with opacity set to 1

This is what I see right now.

enter image description here

What I would like to see is that the div with text 'Top' should totally eclipsed the 'Under' div.

Here is my code (available in codepen):

Javascript

$(document).ready(function () {
  init();
});

function init() {
  $('input').on('click',
    function () {
      $('.answer').addClass('textout');
    });
}

css

.row {
  overflow-x: hidden;
}

.hidden {
  display: none;
}


.answer {
  width:100%;
  position: absolute;
  opacity: 1;
  z-index: 100;
}

.answer-new {
  position: absolute;
   /* border: 1px solid blue;*/
   width: 100%;
  z-index: 1;
}
.textout {
  position: absolute;
  margin: 0;
  left: 0;
  transform: translateX(1000px);
  transition: transform 2s ease-in;
}

html

<div class="contrainer">
  <div>
    <input type='button' value="test"></input>
  </div>

  <div class="row">
    <div class="answer-new">Under

    </div>
    <div class="answer">Top
    </div>

  </div>

</div>

My question:

Is opacity the right way to hide another div in this situation? What is the right approach? I want to keep the 'Under' div visible because the css transform is supposed to achieve a 'reveal' effect

Answers


Carlton February 2016

You could give the above div a background colour to hide the div underneath until it slides away.

Or

You could give the underlying div an opacity of 0 and fade it in upon reveal.

See updated codepen

JS

$(document).ready(function () {
  init();
});

function init() {
  $('input').on('click',
    function () {
      $('.answers').addClass('textout');
    });
}

CSS

.row {
  overflow-x: hidden;
}

.hidden {
  display: none;
}


.answer {
  font-size: 40px;
  color: red;
  width:100%;
  position: absolute;
  opacity: 1;
  z-index: 100;
}

.answer-new {
  font-size: 40px;
  position: absolute;
   /* border: 1px solid blue;*/
   width: 100%;
  z-index: 1;
  opacity: 0;
}
.answers.textout .answer-new {
  opacity: 1;
  transition: opacity 400ms 200ms ease-in;
}

.answers.textout .answer {
  position: absolute;
  margin: 0;
  left: 0;
  transform: translateX(1000px);
  transition: transform 2s ease-in;
}


Maciej Kwas February 2016

Applying background property to .answer element satisfy your needs?

.answer {
  font-size: 40px;
  color: red;
  width:100%;
  position: absolute;
  opacity: 1;
  z-index: 100;
  background:#fff;
}

EDIT

If you don't know the background of your container or it is not a solid color, then you can play with width:0 and overflow:hidden for that matter, like here: http://codepen.io/prowseed/pen/rxQwbQ

Post Status

Asked in February 2016
Viewed 1,291 times
Voted 6
Answered 2 times

Search




Leave an answer