A smoother alternative to jQuery show() and hide()

I have a page setup with a hidden column using the jQuery show() and hide() functions to slide the column in and out.

However it's kind of "clunky" and does not look very smooth when showing/hiding; in contrast I also have a section of the page using jquery UI accordion. When switching between these sections the transition 开发者_运维百科looks very nice and smooth...

Is there a better function than show()/hide() which looks as nice as the accordion does? (maybe the "easing" parameter can be used in the show/hide functions, but i'm not sure how to use this properly?)

I guess you will want to use jQuery.fadeIn and jQuery.fadeOut

Also look at jQuery.slideToggle.

I'm not a big fan of JQuery UI's animation. I have the same problem when trying to animate my show()/hide()... the result is choppy. I ended up using Scriptaculous for most of my animations simply because it provides smoother animations and more configurable than what JQuery UI provides. Scriptaculous can do what JQuery provides, plus more.

you could use FadeOut() FadeIn() or slideDown slideUp . Make the duration is "slow" or in time

For more information: Sliding effect

Here is another way by using animate() http://www.vietanime.net/

the code example here:

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

and the html here:

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

and some little css you could make it beautiful:

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