javascript jQuery show() 和 hide() 的更流畅替代方案
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5327862/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
A smoother alternative to jQuery show() and hide()
提问by David B
I have a page setup with a hidden column using the jQuery show() and hide() functions to slide the column in and out.
我有一个带有隐藏列的页面设置，使用 jQuery show() 和 hide() 函数将列滑入和滑出。
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...
然而，它有点“笨重”，显示/隐藏时看起来不太流畅；相比之下，我还有一部分使用 jquery UI 手风琴的页面。在这些部分之间切换时，过渡看起来非常漂亮和平滑......
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?)
有没有比 show()/hide() 更好的功能，它看起来和手风琴一样漂亮？（也许“缓动”参数可以在显示/隐藏功能中使用，但我不确定如何正确使用它？）
回答by user662630
I guess you will want to use jQuery.fadeInand jQuery.fadeOut
我猜你会想要使用jQuery.fadeIn和jQuery.fadeOut
回答by Ryan
Also look at jQuery.slideToggle.
回答by limc
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 Scriptaculousfor 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.
我不是 JQuery UI 动画的忠实粉丝。在尝试为我的 show()/hide() 设置动画时，我遇到了同样的问题……结果很不稳定。我最终将Scriptaculous用于我的大部分动画，仅仅是因为它提供了比 JQuery UI 提供的更流畅的动画和更多的可配置性。Scriptaculous 可以完成 JQuery 提供的功能，以及更多功能。
回答by Juidan Ho
you could use FadeOut() FadeIn() or slideDown slideUp . Make the duration is "slow" or in time
你可以使用 FadeOut() FadeIn() 或 slideDown slideUp 。使持续时间“慢”或及时
For more information: Sliding effect
更多信息：滑动效果
Here is another way by using animate() http://www.vietanime.net/
这是使用 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:
和这里的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>
and some little css you could make it beautiful:
和一些小 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;
}
