我制作了这个脚本,通过单击按钮来更改一个 div 的 z-index,并且它有效。 (也许我在其中犯了错误,我正在学习)。 但是 z-index 变化很快,我想要平滑的淡出动画。我该怎么做?
$("#card").click(function(){
$("#info").css('z-index', -2000)('position', 'relative');
$("#map").css('position', 'absolute');
});
最佳答案
如果我没理解错的话,你希望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 会被简单地隐藏。
关于javascript - jQuery 中的平滑 onclick z-index 更改,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32735635/