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

<!-- 为了更简单直观的查看，这里我们只书写关键html代码　 //-->
<ul id="navlist">
  <li><a href="#">GBtags</a></li>
</ul>

<!-- 这里将出现滑动加载内容 -->
<div id="headdesc">
  
</div>

<div id="maincontent">
  
</div>


<!-- 引用Javascript类库，使用http://cdn.gbtags.com来选择需要引用的JS //-->
<script type="text/javascript" src="http://cdn.gbtags.com/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});
    
  });
});

 

转载于:https://www.cnblogs.com/ylsq/p/5217107.html