Question

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

然而它有点“笨重”，在显示/隐藏时看起来不太顺畅;相比之下，我还有一个使用jquery UI手风琴的页面部分。当在这些部分之间切换时，过渡看起来非常漂亮和平滑......

是否有比show（）/ hide（）更好的功能，它看起来和手风琴一样好听？（也许“缓动”参数可用于显示/隐藏功能，但我不确定如何正确使用它？）

Answer 1

Answer 2

Answer 3

我不是JQuery UI动画的忠实粉丝。我试图动画我的show（）/ hide（）时遇到同样的问题......结果很不稳定。我最终使用Scriptaculous用于我的大多数动画，因为它提供了比JQuery UI提供的更流畅的动画和更多可配置的动画。 Scriptaculous可以做JQuery提供的，还有更多。

Answer 4

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

有关详细信息：Sliding effect

这是使用animate（）的另一种方法 http://www.vietanime.net/

这里的代码示例：

// 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>

和一些小css你可以使它美丽：

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;
                    }

jQuery show（）和hide（）的更顺畅的替代方案

4 个答案: