jQuery makes an element bigger before hiding it?

Question

I'm testing jQuery (I'm kind of new to programming in general) and I found that whenever I ran the code to hide an element, jQuery made it bigger (in height) and then hid it. It looks messy because both bootstrap and reset .css files are not included, but the error occurs with and without them.

<div class="nav">
  <div class="container">
    <div class="pull-left">
      <span>test1</span> test2</div>
    <ul class="pull-right">
      <li class="nav-button">button1</li>
      <li class="nav-button">button2</li>
      <li class="nav-button">button3</li>
      <li class="nav-button">button4</li>
    </ul>
  </div>
</div>

.nav .container {
  background-color: red;
}

.pull-right li{
  display: inline;
}

.pull-right{
  padding-bottom: 0px;
  margin-bottom: 0px;
}

$(document).ready(function() {

  $('.nav-button').hide(1000);


});

Any idea why? Thanks

Because it's animating it, just call .hide() without any parameter — Rosmarine Popcorn, Feb 16 '15 at 16:37
What should this animation do? Start height is X, the target one is X - hidden elements. These height can't be equal. — pavel, Feb 16 '15 at 16:43
The animation should make it go from its original size to 0, not its original size + "x"px to 0. — , Feb 16 '15 at 16:51

score 1 · Answer 1 · edited May 23 '17 at 12:07

1

This is occuring because the jQuery animation you are using is setting the element to overflow:hidden for the duration of the animation, which displays the object a little differently.

Here is a JsFiddle demo of the issue: https://jsfiddle.net/ed0xd76r/13/

This is known issue that is best described in this Stack Overflow question.

edited May 23 '17 at 12:07

Community

1
1

answered Feb 16 '15 at 17:02

Ross Brasseaux

3,879
1
28
48

jQuery makes an element bigger before hiding it?

1 Answers1