blocks|key|2700777|text|我猜你会想要使用jQuery.fadeIn和jQuery.fadeOut|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|2700778|entityMap|0|LINK|mutability|MUTABLE|url|http://api.jquery.com/fadeIn/|1|http://api.jquery.com/fadeOut/^0|8|D|0|M|E|1|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@$A|O|B|P|1|Q]|$A|R|B|S|1|T]]|C|$]]|$1|D|3|-4|5|6|7|U|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]|L|$5|G|H|I|C|$J|M]]]]

I guess you will want to use <a href="http://api.jquery.com/fadeIn/" rel="noreferrer">jQuery.fadeIn</a> and <a href="http://api.jquery.com/fadeOut/" rel="noreferrer">jQuery.fadeOut</a>

blocks|key|4813723|text|还可以看看jQuery.slideToggle。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|4813724|entityMap|0|LINK|mutability|MUTABLE|url|http://api.jquery.com/slideToggle/^0|5|I|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

Also look at <a href="http://api.jquery.com/slideToggle/" rel="nofollow">jQuery.slideToggle</a>.

blocks|key|1971888|text|我不是JQuery+UI动画的狂热粉丝。我在尝试将我的show()/hide()动画化时也遇到了同样的问题...结果是起伏不定的。我最终为我的大多数动画使用了Scriptaculous，因为它提供了比JQuery+UI更流畅的动画和更多的可配置性。JQuery可以完成JQuery提供的功能，还有更多功能。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1971889|entityMap|0|LINK|mutability|MUTABLE|url|http://script.aculo.us/^0|27|D|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

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 <a href="http://script.aculo.us/" rel="nofollow">Scriptaculous</a> 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.

blocks|key|1966002|text|您可以使用FadeOut()、FadeIn()或slideDown+slideUp。使持续时间是“慢”的或及时的|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1966003|欲了解更多信息，请访问：Sliding+effect|offset|length|1966004|下面是使用animate()+http://www.vietanime.net/的另一种方法|1966005|代码示例如下：|1966006|//+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);
++++++++}
++++);|code-block|syntax|javascript|1966007|和这里的html：|1966008|<div+id="bottom-slide-out-menu">

++++++++++++++++++++<ul+id="footer-menu">
++++++++++++++++++++++++++++<li>
++++++++++++++++++++++++++++++++++++<a>
++++++++++++++++++++++++++++++++++++++++++++<i+class="icon_about">
++++++++++++++++++++++++++++++++++++++++++++<span+class="title">Search
++++++++++++++++++++++++++++++++++++++++++++<span+class="description">Direct+link,+Mp3,+Music,+Video,+Tutorials
++++++++++++++++++++++++++++++++++++</a>
++++++++++++++++++++++++++++</li>
++++++++++++++++++++++++++++<li>
++++++++++++++++++++++++++++++++++++<a>
++++++++++++++++++++++++++++++++++++++++++++<i+class="icon_work">
++++++++++++++++++++++++++++++++++++++++++++<span+class="title">Listen
++++++++++++++++++++++++++++++++++++++++++++<span+class="description">Mp3
++++++++++++++++++++++++++++++++++++</a>
++++++++++++++++++++++++++++</li>
++++++++++++++++++++++++++++<li>
++++++++++++++++++++++++++++++++++++<a+href="archive.php">
++++++++++++++++++++++++++++++++++++++++++++<i+class="icon_help">
++++++++++++++++++++++++++++++++++++++++++++<span+class="title">Archive
++++++++++++++++++++++++++++++++++++++++++++<span+class="description">Direct+Links+Archive
++++++++++++++++++++++++++++++++++++</a>
++++++++++++++++++++++++++++</li>
++++++++++++++++++++++++++++<li>
++++++++++++++++++++++++++++++++++++<a+href="search.php">
++++++++++++++++++++++++++++++++++++++++++++<i+class="icon_search">
++++++++++++++++++++++++++++++++++++++++++++<span+class="title">Developer
++++++++++++++++++++++++++++++++++++++++++++<span+class="description">Keywords,+SEO,+Website+
++++++++++++++++++++++++++++++++++++</a>
++++++++++++++++++++++++++++</li>
++++++++++++++++++++</ul>
++++++++++++</div>|1966009|还有一些你可以让它变得漂亮的小css：|1966010|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;
++++++++++++++++++++}|1966011|entityMap|0|LINK|mutability|MUTABLE|url|http://api.jquery.com/category/effects/sliding/|1|http://www.vietanime.net/^0|0|C|E|0|0|F|P|1|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|16|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|17|8|@]|9|@$D|18|E|19|1|1A]]|A|$]]|$1|F|3|G|5|6|7|1B|8|@]|9|@$D|1C|E|1D|1|1E]]|A|$]]|$1|H|3|I|5|6|7|1F|8|@]|9|@]|A|$]]|$1|J|3|K|5|L|7|1G|8|@]|9|@]|A|$M|N]]|$1|O|3|P|5|6|7|1H|8|@]|9|@]|A|$]]|$1|Q|3|R|5|L|7|1I|8|@]|9|@]|A|$M|N]]|$1|S|3|T|5|6|7|1J|8|@]|9|@]|A|$]]|$1|U|3|V|5|L|7|1K|8|@]|9|@]|A|$M|N]]|$1|W|3|-4|5|6|7|1L|8|@]|9|@]|A|$]]]|X|$Y|$5|Z|10|11|A|$12|13]]|14|$5|Z|10|11|A|$12|15]]]]

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

For more information: <a href="http://api.jquery.com/category/effects/sliding/" rel="nofollow">Sliding effect</a>

Here is another way by using animate()
<a href="http://www.vietanime.net/" rel="nofollow">http://www.vietanime.net/</a>

the code example here:

<pre><code>// SLIDE FOOTER MENU 
 $('#footer-menu &gt; 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);
 }
 );
</code></pre>

and the html here:

<pre><code>&lt;div id="bottom-slide-out-menu"&gt;

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

and some little css you could make it beautiful:

<pre><code>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;
 }
</code></pre>

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

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

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋 

腾讯云代码助手

CODING DevOps

Cloud Studio

SDK中心

API中心

命令行工具

我有一个带有隐藏列的页面设置，使用jQuery show()和hide()函数将列滑入滑出。然而，它有点“笨重”，在显示/隐藏时看起来不是很流畅；相反，我也有一个使用jquery UI accordion的页面部分。当在这些部分之间切换时，过渡看起来非常流畅……有没有比show()/hide()更好的函数，它看起来和手风琴一样漂亮？(也许可以在显示/隐藏函数中使用"easing“参数，但我不确定如

问比jQuery show()和hide()更平滑的替代方法
EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问比jQuery show()和hide()更平滑的替代方法EN

回答 4

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问比jQuery show()和hide()更平滑的替代方法
EN