CODEWITHSUNDEEP
javascriptjquery
GerryofTrivia
GerryofTrivia

Reputation: 430

How do I use .hide and .show without shrinking the content?

I want to create an intro before loading the page content with the code below.

However, every time I click the next and start buttons, the border shrinks down then goes back to normal. How can I get the border to not shrink?

My fiddle.

$(document).ready(function() {
  $('.btnNext').click(function(e) {
    e.preventDefault();
    $(this).closest('.wrap').fadeOut().next().fadeIn();
  });
  $('.start').click(function(e) {
    e.preventDefault();
    $('#container').hide();
    $('#contents').fadeIn();
  });
});
.hidden {
  display: none;
}

#container {
  border: solid 4px black;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#contents {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <div class="wrap">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet, quo.1</p>
    <button class="btnNext">Next</button>
  </div>
  <div class="wrap hidden">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet, quo.2</p>
    <button class="btnNext">Next</button>
  </div>
  <div class="wrap hidden">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet, quo.3</p>
    <button class="start">start</button>
  </div>
  <p id="contents">asdasdsa Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis placeat asperiores veritatis excepturi sunt iste ipsum, aspernatur, nam facilis consectetur.</p>
</div>

Upvotes: 2

Views: 337

Answers (1)

Zakaria Acharki
Zakaria Acharki

Reputation: 67505

Working fiddle.

That happen because the fadeIn() will show the element before the end of the fadeOut() duration.

To solve this issue you could use fadeOut() callback to execute the fadeIn() after the end of fadeOut() duration, like :

$('.btnNext').click(function(e){
  e.preventDefault();
  $(this).closest('.wrap').fadeOut(200,function(){
    $(this).next().fadeIn(201)
  });
});

Hope this helps.

$(document).ready(function() {
  $('.btnNext').click(function(e) {
    e.preventDefault();
    $(this).closest('.wrap').fadeOut(200, function() {
      $(this).next().fadeIn(201)
    });
  });
  $('.start').click(function(e) {
    e.preventDefault();
    $('#container').hide();
    $('#contents').fadeIn();
  });
});
.hidden {
  display: none;
}

#container {
  border: solid 4px black;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#contents {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <div class="wrap">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet, quo.1</p>
    <button class="btnNext">Next</button>
  </div>
  <div class="wrap hidden">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet, quo.2</p>
    <button class="btnNext">Next</button>
  </div>
  <div class="wrap hidden">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet, quo.3</p>
    <button class="start">start</button>
  </div>
</div>

<p id="contents">asdasdsa Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis placeat asperiores veritatis excepturi sunt iste ipsum, aspernatur, nam facilis consectetur.</p>

Upvotes: 2

Related Questions