Javascript x秒后隐藏动画元素

我有一个关于缩略图的类叫做工具栏，我用鼠标把它移到顶部

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有什么方法可以做到这一点吗？

---

谢谢

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

请参阅代码片段

.li{
位置：相对位置；
边框：1px实心#000；
高度：100px；
}
.li.工具栏{
位置：绝对位置；
顶部：10px；
右：0；
左：0；
溢出：隐藏；
高度：24px；
宽度：24px；
填充：0 10px；
颜色：#fff；
背景：红色；
转换：top.3s.3s，不透明度.3s；
}
.li:鼠标悬停。工具栏{
转换：top.3s，不透明度.3s.3s；
顶部：-20px；
不透明度：0；
}
}

---

您可以使用jQuery动画链接

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

所以要澄清的是：每个动画都是在最后一个动画完成后发生的

---

举个例子。您可以在顶部动画之后和不透明度动画之前查看z索引动画的工作方式。

如果要隐藏它，移动的目的是什么？显示：无或不透明度：0将使其不可见

可见性：隐藏--
不透明度：0
--
高度：0
是的，但它会直接移动，我通过动画将其推到顶部，我想在达到20像素时添加这些命令我可以使用显示：无太像那样。所以我想隐藏在0.2秒或0.3秒后，如您所见，会出现转换：top.3s；谢谢你，这就是我要找的。