動畫slideDown（）和slideUp（）在標題minicart

Question

我試圖讓我的迷你購物車（就像這個頁面http://demo.woothemes.com/storefront/）動畫當用戶像這裏盤旋https://www.foodspring.de/但我不知道我該怎麼做到這一點？有人知道答案嗎？我試過slideUp和slideDown，但它不起作用。

謝謝！

Answer 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

Answer 2

是這樣的？ 編輯：不知道爲什麼內容CSS顯示不正確，它應該顯示購物車圖標。

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

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