Question

我有一个名为toolbar的缩略图类，我将鼠标移到顶部。

li .toolbar {
    position:absolute;
    top:10px;
    right:0;
    left:0;
    overflow:hidden;
    height:24px;
    padding:0 10px;
    color: #fff;
    -webkit-transition:top .3s;
    -moz-transition:top .3s;
    -o-transition:top .3s;
    transition:top .3s;
}

li:hover .toolbar{
    top:-20px;
}

所以当我将它移动到顶部20个像素时，我也想隐藏它而不使用z-index。

有没有办法用jQuery或纯CSS来做到这一点？谢谢

Answer 1

您可以使用不透明度隐藏工具栏并设置转换延迟以使其在特定时间后启动

请参阅代码段

＆＃13;

.li {
  position: relative;
  border: 1px solid #000;
  height: 100px;
}

.li .toolbar {
  position: absolute;
  top: 10px;
  right: 0;
  left: 0;
  overflow: hidden;
  height: 24px;
  width: 24px;
  padding: 0 10px;
  color: #fff;
  background: red;
  transition: top .3s .3s, opacity .3s;
}

.li:hover .toolbar {
  transition: top .3s, opacity .3s .3s;
  top: -20px;
  opacity: 0;

}
}

＆＃13;

<div class="li">
  <div class="toolbar"></div>
</div>

＆＃13;

Answer 2

您可以使用jQuery动画链接。

$('.toolbar').animate({top:-20},1000).animate({'z-index': 0},1000).animate({opacity:0});

所以澄清一下：每个动画都是在最后一个动画结束后发生的。

jsfiddle上的示例。您可以在顶部动画之后和不透明度动画之前看到z-index动画是如何工作的。

x秒后隐藏动画元素

2 个答案: