Question

我需要创建一个divs相互叠加的菜单，当点击div时，我希望它能在其他人之上。

与this非常相似的东西，但点击后，我希望它在其他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))添加到$("#container div")，以避免将当前所选框的z-index更改为0。但是因为在没有必要之后我们将它改回到了10。如果代码在将来变得更复杂，可能有助于避免错误。

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

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

3 个答案: