ヘッダーのミニカーでslideDown（）とslideUp（）をアニメ化する

Question

ユーザーがhttps://www.foodspring.de/のように移動したときに私のミニカート（正確にはこのページのようにhttp://demo.woothemes.com/storefront/）をアニメーション化しようとしましたが、 ？誰かが答えを知っていますか？私は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>