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

dot

本文介绍的滑动效果，演示见我的博客文章页导航栏（点击关闭边栏）。
演示：http://bulog.org/share/wordpress/close-sidebar.html

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

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

复制代码

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

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

复制代码

CSS(显示小手)

1. 
   
2. #close-sidebar{cursor:pointer}
   

复制代码

JS(其中delay为新增函数)

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

复制代码