开发者

Vertical animation on menu

I'm making a dropdown menu and it's working perfectly with the slideUp/slideDown functions from the jquery api. However - if i want a vertical animation instead i can't find any functions in the api to do that. Can anyone enlighten me :)? Is it possible?

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/blo开发者_运维知识库g/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>


Try maybe a .slideToggle() function

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

It is a kind of "vertical slide" Jquery site

If you mean "horizontal" slide because slide up and slide down are vertical animation you can do

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

with many parameters this is Jquery link to hide and show documentation


See this very handy article from Karl Swedberg for modifying the slide animations

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

It covers sliding animations in both x and y directions. Should be everything you need to know.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜