我已经使这个脚本通过单击按钮来更改一个div的z-index，并且它可以工作。 （也许我犯了错误，我正在学习）。 但是z-index变化很快，我希望平滑的淡出动画。我该怎么办？
$("#card").click(function(){
$("#info").css('z-index', -2000)('position', 'relative');
$("#map").css('position', 'absolute');
});
答案 0 :(得分：2)
如果我理解正确，您希望div z-index更高div也有一些透明度，并在点击按钮时增加动画的透明度，最终结果为以上z-index最终结束。如果这是正确的，则需要修改两个css属性：opacity和<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 -->
。
使用您的示例的名称，您可以执行此操作。我假设以下HTML：
div div {
position: absolute;
top: 50px;
left: 0px;
}
#map {
z-index: 5;
}
#info {
z-index: 10;
opacity: .8;
}
的两个位置都以它们重叠的方式定位，例如使用这些CSS属性：
$('#card').on('click', function() {
$('#info').animate({opacity: 0}).css({'z-index': 5});
$('#map').css({'z-index': 10});
});
然后，您需要编写以实现上述效果的事件处理程序是：
z-index这是一个说明它的jsfiddle：http://jsfiddle.net/r7jh84nv/1/
请注意，如果您查看所提供链接的代码，则不会修改cat。相反，具有更高索引的div只是隐藏。