jquery控制div隐藏、跳出问题

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<!-- <script type="text/javascript" src="https://getfirebug.com/firebug-lite.js"></script> -->
<script type="text/javascript">
$(document).ready(function (){
$("#id_r").click(function (){
$(this).slideUp();         //我想实现这样：先非置顶隐藏，然后置顶，最后置顶显示
$(this).css("z-index", 4); //但是这样写，却是先置顶，然后隐藏显示
$(this).slideDown();       //为什么呢？我的想法能不能实现呢？
$("#id_g").css("z-index", 1);
$("#id_b").css("z-index", 3);
});
$("#id_g").click(function (){
$(this).hide(500);
$(this).css("z-index", 4);
$(this).show(1000);
$("#id_r").css("z-index", 2);
$("#id_b").css("z-index", 3);
});
$("#id_b").click(function (){
$(this).fadeOut("normal");
$(this).css("z-index", 4);
$(this).fadeIn("normal");
$("#id_r").css("z-index", 2);
$("#id_g").css("z-index", 1);
});
});
</script>
<style type="text/css">
div
{
cursor:pointer;
}
.c_scope
{
background-color:black;
width:60%;
height:20em;
}
.c_g
{
background-color:green;
width:40%;
height:20em;
float:left;
position:absolute;
z-index:1;
}
.c_r
{
background-color:red;
width:40%;
height:20em;
float:left;
left:10%;
position:absolute;
z-index:2;
}
.c_b
{
background-color:blue;
width:40%;
height:20em;
float:left;
left:20%;
position:absolute;
z-index:3;
}
</style>
</head>
<body>
<div id="id_scope" class="c_scope">
<div id="id_r" class="c_r"></div>
<div id="id_b" class="c_b"></div>
<div id="id_g" class="c_g"></div>
</div>
</body>
</html>
我的想法是：当点击div框时，先让div框非置顶隐藏，然后置顶，最后显示。能不能实现呢？

解决方案 »

  1.   

    问个问题：撸主为什么用jquery-1.4.2,而不用最新版的
      

  2.   

    按照我写的click事件不是应该这样(预期)：
    1，“$(this).slideUp();”当点击红色div框时，红色div框应该向上缩回去(整个过程中，红色div框的一部分应该被蓝色div框挡住，因为z-index是2)，
    2，“$(this).css("z-index", 4);”然后调整z-index=4所以此时红色div框应该在最顶层（挡住部分的蓝色div框）。
    3，“$(this).slideDown();”最后逐步显示出来（整个过程在最顶层）。
    但是，实际却不是这样的。
      

  3.   

    按照我写的click事件不是应该这样(预期)：
    1，“$(this).slideUp();”当点击红色div框时，红色div框应该向上缩回去(整个过程中，红色div框的一部分应该被蓝色div框挡住，因为z-index是2)，
    2，“$(this).css("z-index", 4);”然后调整z-index=4所以此时红色div框应该在最顶层（挡住部分的蓝色div框）。
    3，“$(this).slideDown();”最后逐步显示出来（整个过程在最顶层）。
    但是，实际却不是这样的。实际情况是：
    在第一步的时候，红色div框就已经处在最顶层了。这个怎么解决？
      

  4.   

    汗~~这么个问题，将你的层级定义丢进slideUp事件中
    $(this).slideUp(function(){
          $(this).css("z-index", 4);
    });