javascript - 淡入选定的 div 并将其设置在其他 div 之上

Question

我需要创建一个菜单，其中 div 彼此重叠，当单击 div 时，我希望它位于其他菜单之上。

与此非常相似的东西，但是当单击时，我希望它淡入其他 div 的顶部。

有任何想法吗？

谢谢。

Answer 1

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

演示

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

Answer 2

用户是否可以在不透明度位于顶部时对其进行动画处理：http: //jsfiddle.net/bingjie2680/f9j9a/120/

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

Answer 3

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

$("#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))to$("#container div")以避免将当前选定框的 z-index 更改为 0。但是因为我们把它改回10后就行了，其实也没有必要。如果将来代码变得更复杂，可能有助于避免错误。

在这里试试：http:
//jsfiddle.net/BWABk/