悬停时的jQuery导致div消失

Question

HTML 代码：

<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 示例： https://codepen.io/jorda13456/pen/eGoyBp

我想要的效果在左边，但我被右边的问题卡住了。

这是一个清楚地解释问题的 GIF：https://i.gyazo.com/e3d2f7d204037c297e76d06b40c0de08.mp4

我不确定解决方案是什么。我尝试了很多选择，但无论如何我似乎仍然遇到同样的问题。

Answer 1

出现此效果是因为您立即为 .product-options 调用 hide()，但您的动画需要 200 毫秒才能完成。因此，您需要将此行包装到 setTimeout 中，延迟为 200 毫秒。当然这会导致另一个问题——这个块在向下滑动时是可见的。要解决此问题，您需要将 overflow: hidden 添加到您的 .image-1。

Answer 2

您可以只转换高度，使其随着顶部的变化而变化。 过渡：高度 200ms 缓出，顶部 200ms 缓出；