Question

我正在制作一个下拉菜单，它与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>

Answer 1

尝试使用.slideToggle（）函数

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

这是一种“垂直幻灯片”Jquery site

如果您的意思是“水平”幻灯片，因为向上滑动和向下滑动是垂直动画，您可以

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

有许多参数，Jquery link隐藏并显示文档

Answer 2

请参阅Karl Swedberg关于修改幻灯片动画的非常方便的文章

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

它涵盖了x和y方向的滑动动画。应该是你需要知道的一切。

菜单上的垂直动画

2 个答案: