ナビゲーションメニューの画像に簡単なslideToggleエフェクトを実装する

Question

ナビゲーションバーの項目/画像にslideToggleエフェクトを実装しました。効果hereを見ることができます。

私はslideToggleが、湾曲/フリップ効果（私があなたが私に従ってくれることを望んでいます！）よりも、私が見ている効果ではなく、隠れたDIV /画像を真っ直ぐにスライドさせることを望んでいました。 jQueryだけでこの効果を得る方法はありますか？ここで

はCSSです：

li#home { 
    background: url('images/home.png') no-repeat; 
    width: 120px; 
    height: 40px; 
} 

img.hover { 
    display: none; 
} 

HTML：

<div class="nav"> 
<ul> 
<li id="home"><a href="index.html" class=""><img src="images/home-hover.png" width="120px" height="40px" class="hover"></a></li> 
</ul> 

、スクリプト：

$('li#home').hover(function() { 
    $('img.hover').slideToggle('medium'); 
    }); 

私はまた、jQueryのを実装してみました。この作業を取得できませんでしたのでスライドの効果を含むUIとこのスクリプトが、私はこれで何の効果も得られませんでした：

$('li#home').hover(function() { 
     $('img.hover').show("slide", { direction: "down" }, 1000); 
}); 

可能であれば、jQuery UIを使用したくないです。

誰か助けてもらえますか？

おかげで、

ニック

Answer 1

はこれにCSSを変更してみてください：

li#home { 
    background: url('http://salliannputman.com/images/home.png') no-repeat; 
    width: 120px; 
    height: 40px; 
    position: relative; 
} 

img.hover { 
    position: absolute; 
    height: 40px; 
    display: none; 
} 

.nav { 
    background-color:#292929; 
    padding:20px; 
} 

Your updated fiddle.