Javascript 淡入选定的div并将其置于其他div之上

我需要创建一个菜单，每个div都在上面，当单击一个div时，我希望它位于其他div的上面

非常类似的东西，但当点击时，我希望它淡入其他div的顶部

有什么想法吗

---

谢谢。

这将起作用，并且还支持动态添加和删除方框（与其他答案相反），因为事件委派：

$("#container").on("click", "div", function(e) {
  $("#container div").css("z-index", 0); 
  $(this).css({ "z-index": 10, "opacity": 0.4 })
         .fadeTo(400, 1);
});

可以选择将

.not（$（this））

添加到

$（“#container div”）

中，以避免将当前选定框的z索引更改为0。但是因为我们把它改回10后就行了，其实没有必要。如果将来代码变得更复杂，那么这可能有助于避免bug

在这里试用：

---

当不透明度位于顶部时，用户可以设置动画来设置其动画：

---

也许是这样的。可能需要调整以适应

---

这几乎就是我想要的-我如何控制动画的计时？将时间添加为第二个参数。请参见更新，您还可以将起始不透明度调整为0.4，看起来更平滑。。

$("div").click(function(){
    $("div").css("zIndex",1);
    $(this).css({"zIndex":100, 'opacity':0.4}).animate({'opacity':1}, 1000);
});​

$("div").click(function(){
    $("div").css("zIndex",1);
    $(this).fadeOut('slow', function() {
        $(this).css("zIndex",100);
        $(this).fadeIn('slow');
    });
});​