javascript - jQuery 中的平滑 onclick z-index 更改

Question

我制作了这个脚本，通过单击按钮来更改一个 div 的 z-index，并且它有效。 (也许我在其中犯了错误，我正在学习)。但是 z-index 变化很快，我想要平滑的淡出动画。我该怎么做？

$("#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 会被简单地隐藏。