背景画像をフェードアウトする

Question

私は単純な画像メニューを持っています。ホバー上に消えてメニュー項目を表示する背景画像があります。私はゆっくりとこのイメージをフェードアウトするjQueryソリューションを探しています。何か案は？

HTML：

<div id="m1"> 
    <ul class="joomla-nav"> 
     <li>...</li> 
    </ul> 
</div> 

CSS：

#m1 { 
background-image:url('../images/m1.jpg'); 
width:320px; 
height:210px; 
background-color:#1F91B7; 
float:left;} 

#m1:hover { 
background-image:none; 
background-color:transparent} 

#m1:hover .joomla-nav { 
display:block!important; } 

#m1 .joomla-nav { 
display:none!important; } 

多くの感謝！

Answer 1

.fadeOut（）メソッドは、一致する要素の不透明度をアニメーション化します。不透明度が0に達すると、表示スタイルプロパティがnoneに設定されていないので、要素は、もはや私たちは、単純な画像アニメーション化することができ

ページのレイアウトに影響されます。最初に示した要素と

<div id="clickme"> 
    Click here 
</div> 
<img id="book" src="book.png" alt="" width="100" height="123" /> 

を、ゆっくりと隠すことができます：

​​

これを試して、効果があるかどうかを確認してください。

Answer 2

jQueryの.animate()は数値のアニメーションのみ可能です。

background-colorとは異なり、background-imageは数字で表されていないため、アニメーション化することはできません。

あなたができることは、背景を持たない別のdivを使用することです。そして現在のdivがフェードアウトするように、現在のdivをフェードアウトします。