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

Posted 2023-05-08

【中文标题】在标题中的 minicart 上为 slideDown() 和 slideUp() 设置动画

【英文标题】：Animate slideDown() and slideUp() on minicart in header

【发布时间】：2016-11-16 23:04:55

【问题描述】：

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

谢谢！

【问题讨论】：

请分享您尝试过的代码，也可以考虑使用jsfiddle.net

请忽略我的编辑，我搞砸了

【参考方案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>