jquery问题求教（实现一个div层的动态效果）

css：
.cases ｛width:300px;height:240px;position:absolute;z-index:99;bottom:55px;right:20px;｝
.cases .c_ico {width:76px;height:76px;position:absolute;z-index:999;top:-30px;left:-40px;}html:<div class="cases">
   <div class="c_ico"></div>
   <ul>
      <li></li>
   </ul>  
</div>
jquery:$(".c_ico").click(function() {
    $(".cases").stop().animate({
    right:"-300px"   
},500)
});初学jquery第一天，我想实现点击"c_ico"层实现"cases"层移动到浏览器区域外隐藏，（"c_ico"层未完全隐藏）然后再次单击"c_ico"层让"cases"层移动出来回复原状，上面的jquery部分代码是实现的隐藏，请问如何实现再让单击后出来？尝试好多方法都未解决，求教！谢谢！

解决方案 »

  1.   

    你上面都做了-300的操作， 你只需要在 做第一次点击和第二次点击 用个状态来标识就可以了，每点一次改变下一次的值，比如
    var bl=false;
    $(".c_ico").click(function() {
       if(!false) {
        $(".cases").stop().animate({
            right:"-300px"        
        },500) 
    bl=true;
    }
    else {
      $(".cases").stop().animate({
            right:"300px"        
        },500) 
    bl=false;
    }});
      

  2.   

    var isRight = false ;
    $(".c_ico").click(function() {
        $(".cases").stop().animate({
            right:(isRight-0.5)*600+'px'      
        },500) ;
        isRight = !isRight;
    });
      

  3.   

    <head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <style>
    *{ margin:0; padding:0 }
    body { width:100%; overflow:hidden; }
    .cases{width:300px;height:240px;position:absolute;z-index:99;bottom:55px;right:20px; background:#CCC}
    .cases .c_ico {width:76px;height:76px;position:absolute;z-index:999;top:-30px;left:-40px;background:#999}
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
    <script>
    $(function(){
    $(".c_ico").toggle(
    function(){$(".cases").stop().animate({right:"-300px"},500)},
    function(){$(".cases").stop().animate({right:"20px"},500)}
    )
    })
    </script>
    </head><body>
    <div class="cases">
       <div class="c_ico">11111</div>
    </div>
    </body>切换什么的toggle就好了
      

  4.   


    非常感谢，还是toggle最简单了。不过记录下，学习到了两种实现方法：
    1:$(function(){
        $(".c_ico").toggle(
            function(){$(".cases").stop().animate({right:"-300px"},500)},
            function(){$(".cases").stop().animate({right:"20px"},500)}
        )
    })2:var isRight = false;
    var mgRight = 600;
    $(".c_ico").click(function() {    
        $(".cases").stop().animate({
            right:(isRight-0.5)*mgRight+'px'
        },500);
    isRight = !isRight;
    if(!isRight) {
    mgRight = 600
    }else{
    mgRight = 40
    }
    });