jQuery on hover causes div to disappear

Question

The HTML Code:

<div class = "navigation">
  <ul class = "nav">
    <li>Home</li>
    <li>Brands</li>
    <li>Designers</li>
    <li>Contact</li>
  </ul>
</div>

<div class = "sidebar">
  <ul class = "shopping-bag">
    <li>Cart</li>
    <div class = "cart-icon"></div>
  </ul>
  <span class = "empty-cart">No items in cart.</span>

  <h3 class = "cat-title">Categories</h3>
  <ul class = "categories">
    <li>
      <span class = "check-box"></span>
      New Arrivals
    </li>
    
    <li>
      <span class="check-box"></span>
        Accesories
    </li>
    <li>
      <span class = "check-box"></span>
        Bags
    </li>
    <li>
      <span class = "check-box"></span>
        Dressed
    </li>
    <li>
      <span class = "check-box"></span>
        Jackets
    </li>
    <li>
      <span class = "check-box"></span>
        jewelry
    </li>
    <li>
      <span class = "check-box"></span>
      Shoes
    </li>
    <li>
      <span class = "check-box"></span>
        Shirts
    </li>
    <li>
      <span class = "check-box"></span>
       Sweaters
    </li>
    <li>
      <span class = "check-box"></span>
        T-shirts
    </li>
  </ul>

  <h3 class = "cat-title">Colors</h3>
  <ul class = "colors">
    <li class = "inline">
      <span class = "color-box" style = "background:#eae3d3;"></span>
        Beige
    </li>
    <li class = "inline">
      <span class = "color-box" style = "background:#999;"></span>
        Grey
    </li>
    <li class = "inline">
      <span class = "color-box" style = "background:#000;"></span>
        Blue
    </li>
    <li class = "inline">
      <span class = "color-box" style = "background:#6e8cd5;"></span>
        Blue
    </li>
    <li class = "inline">
      <span class = "color-box" style = "background:#b27ef8;"></span>
        Purple
    </li>
    <li class = "inline">
      <span class = "color-box" style = "background:#D2691E;"></span>
        Brown
    </li>
    <li class = "inline">
      <span class = "color-box" style = "background:#f56060;"></span>
        Red
    </li>
    <li class = "inline">
      <span class = "color-box" style = "background:#44c28d;"></span>
        Green
    </li>
  </ul>
</div>

<div class = "content">
  <div class = "results">
    <p>Showing 1–9 of 48 results</p>
    <div class = "gallery">
      <div class = "image-1">
        <img src = "images/1.jpg" />
        <div class = "img-desc">
          <span class = "product-title">Fluted Hem Dress</span>
          <span class = "product-price">$39</span>
          <span class = "product-desc">Summer Dress</span>

          <div class = "product-options hide">
            <span class = "product-size">Sizes</span>
            <br>
            <span style = "color:#b1b1b3;">XS, S, M, L, XL, XXL</span>
            <br>
            <strong class = "color-options">colors</strong>
            <span class = "product-color" style = "background:#000;"></span>
            <span class = "product-color" style = "background:#44c28d;"></span>
            <span class = "product-color" style = "background:#b27ef8;"></span>
            <span class = "product-color" style = "background:#eae3d3;"></span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Codepen example: https://codepen.io/jorda13456/pen/eGoyBp

The effect I want is on the left, but I'm stuck with the problem on the right.

Here is a GIF that clearly explains the issue: https://i.gyazo.com/e3d2f7d204037c297e76d06b40c0de08.mp4

I'm not sure what the solution is. I've tried many options but no matter what I still seem to keep having the same problem.

Answer 1

You could just transition the height so that it changes as the top changes. transition: height 200ms ease-out, top 200ms ease-out;

Answer 2

This effect occurs because you're calling hide() for .product-options immediately, but your animation took 200ms to complete. Hence you need to wrap this line into setTimeout with 200ms delay. Of course it will lead to another problem - this block will be visible while sliding down. To workaround this issue you need to add overflow: hidden to your .image-1.