JQuery实现内容左侧滑动进入效果

JQuery实现内容左侧滑动进⼊效果<!-- 为了更简单直观的查看，这⾥我们只书写关键html代码 //-->
<ul id="navlist">
<li><a href="#">GBtags</a></li>
</ul>
<!-- 这⾥将出现滑动加载内容 -->
<div id="headdesc">
</div>
<div id="maincontent">
</div>
<!-- 引⽤Javascript类库，使⽤来选择需要引⽤的JS //-->
<script type="text/javascript" src="/jquery/1.11.1/jquery.min.js"></script>
/*Javascript代码⽚段*/
$(function(){
$('#navlist a').click(function(){
//这⾥针对navlist中的每⼀个项⽬，添加⼀个click事件
/*
主要的滑动效果实现机制就是添加内容到容器中
使⽤jQuery的.css⽅法定义left属性为当前容器宽度的负数，这样当加载内容后，⽆法看到
最后调⽤.animate⽅法来设置left属性为０，这样⽣成⼀个滑动效果
*/
var $main = $('#maincontent'),
$headdesc = $('#headdesc'),
headdesc = '导航说明⽂字',
content = '页⾯主体内容';
$headdesc
.html(headdesc)
.css({left:-$headdesc.outerWidth()})
.stop()
.animate({left:0});
//同样⽅式处理页⾯内容滑动
$main
.html(content)
.css({'left':-$main.outerWidth()})
.stop()
.animate({left:0});
});
});。