JQ基础练习切换显示、浏览器侧栏 分享

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> 
<script type="text/javascript">
$(document).ready(function(){
    //图片上下切换
    $(".btn").click(function(){
        $(".box").slideToggle()
        $(this).toggleClass("sj");
    });    
    
    
    //分享
    $(".sidebtn").click(function(){
        
        if($(".leftcon").position().left ==-200) 
        {
            $(".leftcon").animate({left: '0px'}, 1000);
        } 
        
        else 
        {
            $(".leftcon").animate({left: '-200px'}, 1000);
        }
        
    });

    
});
</script>

   

<style type="text/css">
/*点击显示隐藏*/
body{margin:0;padding:0;}
.box{width:400px;height:300px;margin:0 auto; background-color:#666;}
.btn{width:140px;line-height:30px;height:30px;overflow:hidden;margin:0 auto;text-align:center;font-size:14px;color:#fff; background-color:#06F;border-radius:0px 0px 5px 5px;cursor:pointer;}
.btn span{border-color: #fff #06F #06F #06F;/*四角*/ transition: -moz-transform 0.2s ease-in 0s; border-style: solid;border-width: 6px; font-size: 0; height: 0; line-height: 30; width: 0;float:right;margin:12px 15px 0 -6px;}
.sj span{border-color: #06F #06F #fff #06F;border-style: solid;border-width: 6px; font-size: 0; height: 0; line-height: 30; width: 0;float:right;margin:6px 15px 0 -6px;}
.btn a:hover span{transform: rotate(180deg);transform-origin: 50% 30% 0;}/*三角旋转*/

/*分享css*/
.leftcon{width:200px;height:300px;position:absolute;left:-200px;;top:0px; background-color:#F00;}
.sidebtn.lefto{margin-left:0px;}
.sidebtn{width:30px;height:68px; padding-top:12px;background-color:#F90;line-height:30px;text-align:center;font-weight:600;border-radius:0px 5px 5px 0px;cursor:pointer;margin:100px 0 0 200px;}
</style>

<!--点击显示隐藏-->
<div class="box"></div>
<div style="height:4px; background-color:#474747;400px;margin:0 auto;"></div>
<div class="btn">点击显示隐藏 <a href="#"><span ></span></a></div>

<!--分享-->
<div class="leftcon">
    <div ></div>
    <div class="sidebtn">分享</div>
</div>

初步学习小弄了一下，还是有很多思路不通啊，加油吧！