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>$(this).slideUp(function(){ $(this).css("z-index", 4);});