Javascript jQuery show（）和hide（）的更平滑的替代方案

我有一个带有隐藏列的页面设置，使用jQuery show（）和hide（）函数将列滑入和滑出

但是，它有点“笨重”，在显示/隐藏时看起来不是很平滑；相比之下，我还有一部分页面使用jQueryUIAccordion。当在这些部分之间切换时，过渡看起来非常漂亮和平滑

---

有没有比show（）/hide（）更好的函数，它看起来和手风琴一样漂亮？（也许“easing”参数可以在show/hide函数中使用，但我不确定如何正确使用它？

我想你会想使用，并且也看看。

我不是JQuery UI的动画迷。我在尝试设置show（）/hide（）的动画时遇到了相同的问题。。。结果是波涛汹涌。我最终使用了我的大多数动画，因为它提供了比jQueryUI更平滑的动画和更可配置的功能。Scriptaculous可以做JQuery提供的事情，还有更多。

您可以使用FadeOut（）FadeIn（）或slideDown slideUp。使持续时间“缓慢”或及时

有关更多信息：

下面是使用animate（）的另一种方法

下面的代码示例：

// SLIDE FOOTER MENU 
    $('#footer-menu > li').hover(
        function () {
            var $this = $(this);
            $('a',$this).stop(true,true).animate({
                    'bottom':'-45px'
                }, 300);
            $('i',$this).stop(true,true).animate({
                    'top':'-10px'
                }, 700);
        },
        function () {
            var $this = $(this);
            $('a',$this).stop(true,true).animate({
                    'bottom':'-145px'
                }, 300);
            $('i',$this).stop(true,true).animate({
                    'top':'50px'
                }, 400);
        }
    );

还有这里的html：

<div id="bottom-slide-out-menu">

                    <ul id="footer-menu">
                            <li>
                                    <a>
                                            <i class="icon_about"></i>
                                            <span class="title">Search</span>
                                            <span class="description">Direct link, Mp3, Music, Video, Tutorials</span>
                                    </a>
                            </li>
                            <li>
                                    <a>
                                            <i class="icon_work"></i>
                                            <span class="title">Listen</span>
                                            <span class="description">Mp3</span>
                                    </a>
                            </li>
                            <li>
                                    <a href="archive.php">
                                            <i class="icon_help"></i>
                                            <span class="title">Archive</span>
                                            <span class="description">Direct Links Archive</span>
                                    </a>
                            </li>
                            <li>
                                    <a href="search.php">
                                            <i class="icon_search"></i>
                                            <span class="title">Developer</span>
                                            <span class="description">Keywords, SEO, Website </span>
                                    </a>
                            </li>
                    </ul>
            </div>

---

或可能滑入/滑出。：）感谢您的回复，但是fadeIn/fadeOut函数没有将列滑入/滑出，而是突然将列宽度跳至100%，然后将其淡入，这不是我要找的。你正在为表行设置动画吗？你也可以尝试

设置动画

将宽度更改为

0px

以隐藏，以及类似

100%

的内容以显示..谢谢，我已经尝试过了，但是slideToggle与show/hide函数一样粗/跳跃。

ul#footer-menu{

                            list-style:none;
                            position:absolute;
                            bottom:0px;
                            left:20px;
                            font-size:36px;
                            font-family: Helvetica, Arial, sans-serif;
                            font-weight: bold;
                            color:#999;
                            letter-spacing:-2px;
                    }
                    ul#footer-menu li{
                            float:left;
                            margin:0px 10px 0px 0px;
                    }
                    ul#footer-menu a{
                            cursor:pointer;
                            position:relative;
                            float:left;
                            bottom:-145px;
                            line-height:20px;
                            width:210px;
                    }
                    ul#footer-menu a:hover{
                            text-decoration: none;
                    }