滑动关闭侧边栏(基于jQuery1.4)

本文介绍的滑动效果，演示见本站文章页导航栏（关闭边栏）。之前在林木木的博客看到《关闭/显示侧边栏》一文，忍不住试了一下，但是对实际效果不太满意，于是一直没用。昨天翻看 jQuery 参考时，看到 1.4 版之后新出的几个函数，又想起“干掉边栏”这事，放上一试，感觉效果不坏，于是就有了这篇文章。

要实现此效果，首先需要加载 1.4 或更新版本的 jQuery 库：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"><!--mce:0--></script>

Html(加一个判断语句，只在文章页显示)

<?php if (is_single()) { ?>
<li id="close-sidebar"><a>关闭边栏</a></li>
<?php } ?>

CSS(显示小手)

#close-sidebar{cursor:pointer}

JS(delay为新增函数)

$('#close-sidebar a').toggle(function(){
	$(this).text("显示边栏");
	$('#sidebar').slideUp(400);//用400毫秒的时间收起边栏
	$('#main').delay(500).animate({width: "930px"}, 600);//花500毫秒等待边栏收起后，用600毫秒的时间加宽主栏
	},function(){
	$(this).text("关闭边栏");
	$('#main').animate({width: "649px"}, 600);
	$('#sidebar').delay(700).slideDown(400);
});

补充：如果不想用jquery 1.4实现，可以使用以下代码：

$('#close-sidebar a').toggle(function(){ 
	$(this).text("显示边栏");
	$('#sidebar').slideUp(400, function(){$('#main').animate({width: "930px"}, 600);});
	},function(){
	$(this).text("关闭边栏"); 
	$('#main').animate({width: "649px"}, 600, function(){$('#sidebar').slideDown(400);});
});

20 thoughts on “滑动关闭侧边栏(基于jQuery1.4)”

支持不错，顶下学习了、

20 thoughts on “滑动关闭侧边栏(基于jQuery1.4)”

发表评论 取消回复

发表评论取消回复