Javascript Css/Jquery向上滑动面板

我试图制作一个向上滑动的面板，其中显示了一个带有css/jquery的隐藏菜单。如果您查看此链接，您会注意到当您将鼠标悬停在文件上时，会显示一个隐藏菜单。有人能给我举个例子说明我是如何做到这一点的吗？

HTML

试试这个

HTML

<div class="main">
 <div class ="samp1">
    Content
 </div>
 <div class="description">
    Description
 </div>
 <div class="icon">
    Icon
 </div>
</div>

JQUERY

$('.main').hover(function(){
  $('.description').animate({'margin-top': '-18px'}, 500);
}, function(){
  $('.description').animate({'margin-top': '0px'}, 500);
})

---

是怎么回事？为什么您的代码以三个结束标记开始？仅针对JSFIDLE。因为如果我在div slideup时不这样做，它将脱离文档，@tyrese moore将无法正确查看演示，因此我仅为演示添加了3个
来吧，如果您没有引入错误，这也会起作用。什么错误？在XHTML中，您可以使用

，在HTML5中，您可以使用

。三个结束符标记是无效的标记，即使您可能会发现浏览器具有足够的容忍度来呈现它们@李斯特先生在这里说得很对-我可以建议你更新这个答案吗？

<div class="main">
 <div class ="samp1">
    Content
 </div>
 <div class="description">
    Description
 </div>
 <div class="icon">
    Icon
 </div>
</div>

.main{
 width:100%;
 height:140px;  

}
.samp1{

 background-color:grey;
 padding:10px 10px 20px 10px;

}
.description{
 position:absolute;
 background-color:red;
 width:97.1%;
}
.icon{
 background-color:blue;

}

$('.main').hover(function(){
  $('.description').animate({'margin-top': '-18px'}, 500);
}, function(){
  $('.description').animate({'margin-top': '0px'}, 500);
})