CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Jan-Willem de Boer
Jan-Willem de Boer

Reputation: 797

When hiding content make the divs jump smoother

I created code that will remove a div and will animate the content inside of it to make it look like its sliding out. This is all going okay, but the divs underneath seem to jump up and I want to smooth this. This is my code:

$(document).on('click', 'div', function() {
  const span = $(this).find('span');
  const div = $(this);
  span.css({
    'right': '100%'
  });
  window.setTimeout(function() {
    div.hide();
  }, 250);
})
div {
  width: 100%;
  height: 5em;
  text-align: center;
  vertical-align: middle;
  padding: 20px;
  background-color: #e6e6e6;
  margin-bottom: 10px;
}

div>span {
  right: 50%;
  display: block;
  position: absolute;
  transition: all 0.25s ease-out;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div>
  <span>
    one
  </span>
</div>
<div>
  <span>
    two
  </span>
</div>
<div>
  <span>
    three
  </span>
</div>
<div>
  <span>
    four
  </span>
</div>

Upvotes: 1

Views: 56

Answers (2)

yunzen
yunzen

Reputation: 33439

USe the slideUp method of jQuery along with a duration argument

$(document).on('click', 'div', function() {
  const span = $(this).find('span');
  const div = $(this);
  span.css({
    'right': '100%'
  });
  window.setTimeout(function() {
    div.animate({height: 0, padding: 0}, 250);
  }, 250);
})
div {
  width: 100%;
  height: 5em;
  text-align: center;
  vertical-align: middle;
  padding: 20px;
  background-color: #e6e6e6;
  margin-bottom: 10px;
}

div>span {
  right: 50%;
  display: block;
  position: absolute;
  transition: all 0.25s ease-out;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div>
  <span>
    one
  </span>
</div>
<div>
  <span>
    two
  </span>
</div>
<div>
  <span>
    three
  </span>
</div>
<div>
  <span>
    four
  </span>
</div>

There is a slight annoyance with the margins being animated with slideUp which make the gap between boxes smaller whilst animating. To prevent this, only animate the height and the padding.

$(document).on('click', 'div', function() {
  const span = $(this).find('span');
  const div = $(this);
  span.css({
    'right': '100%'
  });
  window.setTimeout(function() {
    div.animate({height: 0, padding: 0}, 250)
    .animate({margin: 0}, 50);
  }, 250);
})
div {
  width: 100%;
  height: 5em;
  text-align: center;
  vertical-align: middle;
  padding: 20px;
  background-color: #e6e6e6;
  margin-bottom: 10px;
}

div>span {
  right: 50%;
  display: block;
  position: absolute;
  transition: all 0.25s ease-out;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div>
  <span>
    one
  </span>
</div>
<div>
  <span>
    two
  </span>
</div>
<div>
  <span>
    three
  </span>
</div>
<div>
  <span>
    four
  </span>
</div>

Upvotes: 3

Sugam Parajuli
Sugam Parajuli

Reputation: 185

You just can add value to hide function. it also gives a smooth transition.

$(document).on('click', 'div', function() {
  const span = $(this).find('span');
  const div = $(this);
  span.css({
    'right': '100%','height':'0px','transition':'5s'
  });
  window.setTimeout(function() {
    div.hide(500);
  }, 250);
})
div {
  width: 100%;
  height: 5em;
  text-align: center;
  vertical-align: middle;
  padding: 20px;
  background-color: #e6e6e6;
  margin-bottom: 10px;
}

div>span {
  right: 50%;
  display: block;
  position: absolute;
  transition: all .25s ease-out;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div>
  <span>
    one
  </span>
</div>
<div>
  <span>
    two
  </span>
</div>
<div>
  <span>
    three
  </span>
</div>
<div>
  <span>
    four
  </span>
</div>

Upvotes: 0

Related Questions