在标题中的 minicart 上为 slideDown() 和 slideUp() 设置动画答案

【问题标题】：Animate slideDown() and slideUp() on minicart in header在标题中的 minicart 上为 slideDown() 和 slideUp() 设置动画
【发布时间】：2016-11-16 23:04:55
【问题描述】：

当用户像这里https://www.foodspring.de/ 一样悬停时，我试图让我的迷你购物车（就像在此页面上的http://demo.woothemes.com/storefront/ 一样）动画，但我不知道该怎么做？有人知道答案吗？我已经用slideUp 和slideDown 试过了，但它不起作用。

谢谢！

【问题讨论】：

请分享您尝试过的代码，也可以考虑使用jsfiddle.net
请忽略我的编辑，我搞砸了

标签： jquery css jquery-animate slide

【解决方案1】：

您可以简单地使用 CSS 作为解决此问题的方法。

悬停购物车标题时显示列表的小示例：

HTML：

<a class="cart">
    <span>Cart title</span>
    <ul>
        <li>item 1</li>
        <li>item 2</li>
    </ul>
</a>

CSS：

.cart ul {
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;

    margin-top: -10px;
    display: none;
}

.cart:hover ul {
    margin-top: 0;
    display: block
}

如您所见，产品列表仅在您 :hover .cart 时显示

【讨论】：

【解决方案2】：

喜欢这样吗？编辑：不确定为什么内容 css 没有正确显示，它应该显示购物车图标。

.count:after{
  content:"\f291"
  }
.count:hover{
  color:green
  }

<div>
 <span class="count"></span>
  </div>

【讨论】：