Question

HTML代码：

＆＃13;

<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>

＆＃13;

Codepen示例： https://codepen.io/jorda13456/pen/eGoyBp

我想要的效果在左边，但是我在右边遇到了问题。

以下是一个明确解释此问题的GIF：https://i.gyazo.com/e3d2f7d204037c297e76d06b40c0de08.mp4

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

Answer 1

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

Answer 2

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

悬停的jQuery导致div消失

2 个答案: