之前文章《”关闭/显示侧边栏”最简代码版》,先来看看其中的jQuery代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | $('#close-sidebar a').toggle(function(){ $(this).text("显示侧边栏"); $('#sidebar').hide(); $('#content').animate({width: "960px"}, 1000); },function(){ $(this).text("关闭侧边栏"); $('#sidebar').show(); $('#content').animate({width: "705px"}, 800); }); |
这段代码有个小小不完美的地方的,其实也有多个留心的童鞋发现并向我反馈过:
当点击“显示侧边栏”时,浏览器右侧的滚动条“急剧变化”,若侧边栏比较长更是明显……
其实当点击“显示”,侧边栏立即就显示出来了,只是主体的宽度还未缩回,它就被压在主体下面,页面的高度也随之增加,0.8s后才得以跳上来。
这与我们之前写代码的期望有点出入:点击“关闭”,侧边栏消失,主体宽度伸长;点击“显示”,主体宽度缩回,侧边栏显现。
处理这个小问题,首先想到的是用jQuery的fadeIn/fadeOut,轻松解决,可杯具的是经过这个淡入淡出后的字体,在IE下会变得惨不忍睹,尤其是雅黑。怎么办呢?
再次看《jQuery1.4中文文档》,发现新增了一个函数,可将队列中的函数延时执行:
.delay()
用这个函数也轻松解决,调整后的jQuery代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | $('#close-sidebar a').toggle(function(){ $(this).text("显示侧边栏"); $('#sidebar').hide(); $('#content').animate({width: "960px"}, 1000); },function(){ $(this).text("关闭侧边栏"); $('#sidebar').delay(800).show(0); $('#content').animate({width: "705px"}, 800); }); |
可,用最新版1.4的童鞋并不多,还是通过网络搜索学习,原来早有另外一种书写格式可实现这个函数的功能,经过尝试,当当当当,完美版出现:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | $('#close-sidebar a').toggle(function(){ $(this).text("显示侧边栏"); $('#sidebar').hide(); $('#content').animate({width: "960px"}, 1000); },function(){ $(this).text("关闭侧边栏"); $('#content').animate({width: "705px"}, 800, function(){$('#sidebar').show();}); }); |
把原7、8两行代码合并,即实现了主体宽度缩回后,侧边栏再显示!
OK,到此本文的任务已经完成,下面分享我使用“关闭/显示侧边栏”的jQuery代码:
$('#close-sidebar a').toggle(function(){ $(this).text("显示侧边栏") $('#sidebar').hide().prev().animate({width: "960px"}, 1000); },function(){ $(this).text("关闭侧边栏") $('#sidebar').delay(800).show(0).prev().animate({width: "705px"}, 800); });
如果你的主题侧边栏和主体的HTML结构是同级的,并且调用的是jQuery1.4版,就可以使用上述代码啦~

顶!!效果杠杠的
哈哈,够速度哟!
刚好刷新推特…..看到了就来看看效果
原来华斐也来这里了,呵呵,今天看了好几个jq的代码,不知道怎么用。诶,惭愧。
多试试就OK了~
一时没注意,就没沙发了
哈哈,都是挂着推的人哟~
其实刚从教室学习归来呢
发现我那 kill sidebar 的功能没地方放…冏…
放顶部的导航里咯~周末还学习,恩,好孩子!
要考试了呢-.-
没杀到发,没事,照样顶起
呵呵,多谢支持哦!
忙坐下围观..
copying.
单栏的主题也是很有魅力地~
貌似木木一个礼拜更新一次了。而且都是待技术的
平日人都呆在小学里,而且没有网……拿手机看书。
哇,沙发这么快就没了,顶博主,厉害~!!
沙发被秒了……
淡入淡出后的字体,在IE下会变得惨不忍睹;这个bug可以通过给字体设置背景颜色实现,尽管不是非常完美。
其实我有个小建议,哈哈:
记住Cookies,如果是关闭侧栏的话,之后在整个WordPress中都不加载 #sidebar,在没有加载 #sidebar 的时候点击了打开侧边栏,则用 Ajax 把 sidebar 加载进来。不知道你觉得如何?
其实我有点感觉 #content 的 animated 的时间有点长了。。。
那是因为 IE 下的透明度是应用 filter 实现的,而 filter 和 Windows 的 ClearType 字体渲染冲突…动画结束以后可以把文字的 inline CSS 用 JS 去掉,这样是可以恢复平滑渲染的。而动画过程中加大锯齿是不能避免的。
原来是这么回事呀,网上曾经搜索,都弄不明白呢!现在清楚了,多谢多谢~
对微软很无语啊,filter 和 ClearType 都是他自家的东西,居然冲突…
恩,记下,Cookies还不知道怎么用呢,现成文章里太过复杂,作罢中呢!
感谢提醒~~
依然折腾,我折腾不起来了
萎了?HOHO,帅哥也虚咯!
我也正琢磨着给我的站也加jQuery呢,mark一下先
恩,我用jQuery还是因为AJAX评论提交~
晚來了啦啊啊啊啊啊
華麗麗的SOFA…..
额,主要米有小闇的IM,有的话下次给你内部消息~HOHO
弱弱地問一下IM是不是騰訊微博……之類的
即时通讯类~QQ,MSN,杂七杂八微博呀
只有twitter, plurk和MSN…..(畫圈圈
推特是抢SF的利器哟~@林木木
已加推特噢
恩,FO了~~
顶一下!
多谢多谢!
你居然已经用上1.4了,我还在1.2X呢
反正不差那么几KB,主要是看到说1.4优化了很多函数的性能~
早就注意MUMU的侧边栏的文章了,一直没时间下手,现在都是终结版了,我也照抄一个
恩,鼓励折腾~~
效果挺好看的,但是不知道有多少访问者喜欢关闭sidebar,如果没有太多访问者使用的话,就没必要使用了。
一般就在阅读长篇文章时还会用到,另外没做Cookies记录,耍酷大于实用……
耍酷+1
恩哈~~
挺好玩的,不过我那个模版不行 – =
恩,得看模板框架~
很强大啊!厉害
哈哈,还差一个Cookies记录功能,不过还没理清代码,暂时就搁着~
有个性的小功能
恩,耍酷~~
呵呵,恩哈~~
恩,折腾的不错,支持!
不愧是折腾丸子,收藏了,呵呵,不过我现在都不敢动代码啊。
有啥不敢的,备份就好了嘛!
收下新代码~感谢~我的侧边栏太长,缩得慢些会很恶心,研究一下再改改主题
呵呵……改下收缩的速度咯~
过来顶一下,虽然我是真的看不懂
呵呵,不懂也无所谓撒,想加招呼一声,马上帮你搞定~
这里竟然还有perfect版本,哈哈~搬过来用之~
代码上我能力范围内最优了~嘻嘻
为什么边栏消失后,右边的线缩回来了,但主题部分还是在原地不会移到中间啊
明白问题所在那就好办了,不妨看看jQuery代码吧~读一读
我的inove主题一直不行 不知为啥
不是回复过你了嘛,ID和class要对应!看代码注释和文章内容撒!
我知道啊 我的div都是用id表示的 当然用$去元素就行了 但是不知为何 哎
$(‘#ID’),$(‘.Class’)
举手 为什么我点过之后文字不变成 显示侧边栏而是乱码呢
请把另存为UTF-8格式的~
啊啊 真的耶!
kiss&thx
呵呵,哦哦,我晕了……
貌似有点复杂,唉···
思路要清晰,不然就纯找折腾……
怎么用了也不见效?变成文字不能点击使用了- -
另外google也提供了外链地址了:http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js
看看这篇文章: 如何正确使用jQuery代码 http://immmmm.com/how-to-use-jquery-code.html
谢谢,我看看去~
嘿嘿,现在看不到那个效果
我是来穿越的..
木木的字体什么什么字体?
其他博客放什么位置?
求教,如何默认是隐藏侧边栏的?