jquery控制div隐藏、跳出有关问题 _JavaScript

jquery控制div隐藏、跳出问题

HTML code

<!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,而不用最新版的
------解决方案--------------------
汗~~这么个问题，将你的层级定义丢进slideUp事件中

JScript code

$(this).slideUp(function(){
      $(this).css("z-index", 4);
});