在jQuery中平滑onclick z-index更改

Question

我已经通过单击按钮使此脚本更改了一个div的z-index，它可以工作。 （也许我在学习中有错误）。 但是z索引变化很快，我想要平滑的淡出动画。 我该怎么做？

$("#card").click(function(){
    $("#info").css('z-index', -2000)('position', 'relative');
    $("#map").css('position', 'absolute');
});

Answer 1

如果我理解正确，则希望z-index较高的div也具有一定的透明度，并在单击按钮时通过动画增加透明度，最终结果是上面的div最终位于下面。 如果正确，则需要修改两个css属性： z-index和opacity 。

使用示例的名称，可以在这里完成。 我假设下面的HTML：

<button id="card">Swap</button>

<div id="map"> </div> <!-- Under at first, to move up on click -->
<div id="info"> </div> <!-- Above at first, to move down on click -->

两个div的位置都相互重叠，例如具有以下CSS属性：

div {
    position: absolute;
    top: 50px;
    left: 0px;
}
#map {
    z-index: 5;
}
#info {
    z-index: 10;
    opacity: .8;
}

然后，您需要编写以实现上述效果的事件处理程序是：

$('#card').on('click', function() {
    $('#info').animate({opacity: 0}).css({'z-index': 5});
    $('#map').css({'z-index': 10});
});

这是一个说明它的jsfiddle： http : //jsfiddle.net/r7jh84nv/1/

请注意，如果您查看提供的链接的代码，则不会修改z-index 。 相反，具有较高索引的div只是被隐藏了。