2011-03-04 10 views
1

私はドロップダウンメニューを作っています。これはjquery APIのslideUp/slideDown関数と完全に機能しています。しかし、私は代わりに垂直アニメーションをしたい場合、私はそれを行うには、API内の関数を見つけることができません。誰か私を啓発することができます:)?出来ますか?メニューの垂直アニメーション

Htmlの

<ul> 

       <li><a href="">Hvem</a></li> 
       <li><a href="">Hvad</a> 
        <ul> 
        <li class="first-item"><a href="">Produkter</a></li> 
        <li><a href="">Leveringer</a></li> 
        </ul> 
       </li> 

       <li><a href="">Hvordan</a> 

        <ul> 

         <li class="first-item"><a href="">Reklame</a></li> 
         <li><a href="">PR</a></li> 
         <li><a href="">Websites</a></li> 
         <li><a href="">Illustrationer</a></li> 

        </ul> 

       </li> 
       <li class="last-item"><a href="">S??dan!</a></li> 

      </ul> 

のjQuery

<!-- Menu animation --> 
<script type="text/javascript" src="http://www.hieu.co.uk/blog/wp-content/plugins/download-monitor/download.php?id=Groject.ImageSwitch.yui.js"></script> 
    <script type="text/javascript"> 
$(document).ready(function() { 
    $('#menu > ul > li:not(.inpath) ul').hide(); 
    $('#menu .inpath ul').show(); 
    $('#menu > ul > li:not(.inpath)').hover(
    function() { 
     $('ul', this).slideDown(300); 
     $('#menu li.inpath ul').slideUp(300); 
    }, function() { 
     $('ul', this).slideUp(300); 
     $('#menu li.inpath ul').slideDown(300); 
    }); 
}); 
    </script> 
+0

水平アニメーションを意味しますか? slideUp/slideDown/slideToggleは縦のアニメーションです – Blowsie

答えて

0

場合、それは "縦スライド" の一種であるかもしれないJquery site

を.slideToggle()関数

$('#menu li.inpath ul').slideToggle(300); 

をお試しくださいあなたは多くのパラメータで

$('.stuff').hide("slide", { direction: "left" }, 400); 
$('.stuff').show("slide", { direction: "left" }, 400); 

を行うことができますが意味する「水平」スライドスライドアップとスライドダウンが垂直アニメーションであるため、これは

+0

jquery UIライブラリを追加しました。魅力的なように動作します:-)! – Hemil

0

を変更するためのカールSwedbergから、この非常に便利な記事を参照してください非表示に​​とショーのドキュメントですこれは、x方向とy方向の両方でアニメーションをスライドカバースライドアニメーション

http://www.learningjquery.com/2009/02/slide-elements-in-different-directions

。あなたが知る必要があるすべてのものでなければなりません。

+0

クールに見える、私はそれをチェックします! – Hemil

関連する問題