左侧浮动层滑出效果求指导

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<style type="text/css">
*{
margin:0;
padding:0;
}
.div{
width:290px;
height:100%;
background:#066;
position:fixed;
top:0;
left:0;
z-index:99;
}
.div1{
width:290px;
height:100%;
background:#09F;
position:absolute;
top:0;
left:0;
z-index:9;
}
.div2{
height:30px;
width:30px;
position:absolute;
top:0;
left:290px;
cursor:pointer;
background:#966;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
    $('.div2').click(function(){
$('.div1').animate({
left:'290px'
})
$('.div2').animate({
left:'290px'
})
})
});
</script>
</head><body>
<div class="div">
<div class="div1">
  <div class="div2">

  </div>
</div>
</div>
</body></html>
请问下我的div1怎么才能从div的右侧滑出而不是从浏览器的左边滑出 div是固定的还有就是再次点div2的时候 div1怎么滑动回去

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<style type="text/css">
*{
    margin:0;
    padding:0;
    }
.div{
    position: absolute;
    width:290px;
    height:100%;
    background:#066;
    float: left;
    top:0;
    left:0;
    z-index:99;
    }
.div1{
    width:290px;
    height:100%;
    background:#09F;
    position:absolute;
    top:0;
    left:0;
    z-index:9;
    }
.div2{
    height:30px;
    width:30px;
    position:absolute;
    top:0;
    left:290px;
    cursor:pointer;
    background:#966;
    }
</style>
<script type="text/javascript">
$(document).ready(function(){
    $('.div2').click(function(){
        $('.div1').animate({
            "margin-left":'290px'
            })
        })
});
</script>
</head>

<body>
<div class="div">
    </div> <div class="div1">
  <div class="div2">

  </div>
</div>
</body>

</html>
这样？
刚吃饭去了，其实很简单，你的div包在div1外边，而且固定宽度的
而且相互嵌套的div元素，你的z-index也没用的
是这样的  请问再点击下怎么回去这个没写过，不过想了一下可以这样
$('.div2').click(function(){
       if(!$('.div1').hasClass('out')){
        $('.div1').addClass('out').animate({
            "margin-left":'290px'
            })        }else {
           $('.div1').removeClass('out').animate({
            "margin-left":'0px'
            })
        }
})
是这样的  请问再点击下怎么回去这个没写过，不过想了一下可以这样
$('.div2').click(function(){
       if(!$('.div1').hasClass('out')){
        $('.div1').addClass('out').animate({
            "margin-left":'290px'
            })        }else {
           $('.div1').removeClass('out').animate({
            "margin-left":'0px'
            })
        }
})
谢谢可以了请问下怎么效果不实现我该怎么获取到id='map_btn_bu'或者class='map_xinxi_content_bu'
是这样的  请问再点击下怎么回去这个没写过，不过想了一下可以这样
$('.div2').click(function(){
       if(!$('.div1').hasClass('out')){
        $('.div1').addClass('out').animate({
            "margin-left":'290px'
            })        }else {
           $('.div1').removeClass('out').animate({
            "margin-left":'0px'
            })
        }
})
谢谢可以了请问下怎么效果不实现我该怎么获取到id='map_btn_bu'或者class='map_xinxi_content_bu'jquery的话，$("#map_btn_bu")和$(".map_xinxi_content_bu")就行了啊
语句中也可以这样$(".div").find("#map_btn_bu")这样
是这样的  请问再点击下怎么回去这个没写过，不过想了一下可以这样
$('.div2').click(function(){
       if(!$('.div1').hasClass('out')){
        $('.div1').addClass('out').animate({
            "margin-left":'290px'
            })        }else {
           $('.div1').removeClass('out').animate({
            "margin-left":'0px'
            })
        }
})
谢谢可以了请问下怎么效果不实现我该怎么获取到id='map_btn_bu'或者class='map_xinxi_content_bu'jquery的话，$("#map_btn_bu")和$(".map_xinxi_content_bu")就行了啊
语句中也可以这样$(".div").find("#map_btn_bu")这样
http://bbs.csdn.net/topics/390635370
麻烦看看这个这是我刚刚发的帖子

左侧浮动层滑出效果 求指导

解决方案 »

左侧浮动层滑出效果求指导