jQuery show()和hide()的更顺畅的替代方案

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

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

有没有比show()/ hide()更好的function,它看起来和手风琴一样好听? (也许“缓动”参数可用于显示/隐藏function,但我不确定如何正确使用它?)

我想你会想要使用jQuery.fadeIn和jQuery.fadeOut

另请参阅jQuery.slideToggle 。

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

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

有关更多信息: 滑动效果

这是另一种使用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在这里:

  

和一些小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; }