Javascript 内容滑块概念

有人能帮我创建一个简单的内容滑动概念吗

我想要的东西可以在这个网站的（）底部部分-4个面板中看到，它们在悬停时滑出，并在解除悬停后恢复到原来的状态。我已经尝试了一些css块，但是它变得非常复杂，而且我知道我最终需要jQuery来完成一些事情，比如当鼠标打开面板时不停止动画

所以我想问的是，是否有人会这么善良，帮助我创建一个简单的概念，这种类型的内容动画

编辑：这是我所做的，但一点也不多，可能根本不兼容。它基本上是由div和动画来完成的。

<div class="wrap">
 <div class="wrap-inner">
  <div class="normal">
    Original text
  </div>
  <div class="hover">
   other text
  </div>
 </div>
</div>

.wrap
{
 display:block;
 width:300px;
 height: 300px;
 position:absolute;
 top:0px;
 overflow:hidden; 
}
.wrap-inner{
 position:absolute;
 height:600px;
 width:300px;
 top:0;
 -webkit-transition: top 300ms ease;
}
.wrap-inner:hover{
 top:-300px;
}
.normal
{
 display:block;
 width:300px;
 height:300px;
 background-color:green;
}
.hover
{
 width:300px;
 height:300px;
 background-color:red;
}

原文
其他文本
包
{
显示：块；
宽度：300px；
高度：300px；
位置：绝对位置；
顶部：0px；
溢出：隐藏；
}
.包内{
位置：绝对位置；
高度：600px；
宽度：300px；
排名：0；
-webkit过渡：最快300毫秒易用性；
}
.包裹内部：悬停{
顶部：-300px；
}
典型的
{
显示：块；
宽度：300px；
高度：300px；
背景颜色：绿色；
}
悬停
{
宽度：300px；
高度：300px；
背景色：红色；
}

我想你很接近了，只需要在包裹里放一个600px的容器，可以把两个300px的东西一个放在另一个下面。否则，当包裹高度设置为300px时，将不会渲染第二项

原文
其他文本
包
{
显示：块；
宽度：300px；
高度：300px；
位置：绝对位置；
顶部：0px；
溢出：隐藏；
}
.包内{
位置：绝对位置；
高度：600px；
宽度：300px；
排名：0；
-webkit过渡：最快300毫秒易用性；
}
.包裹内部：悬停{
顶部：-300px；
}
典型的
{
显示：块；
宽度：300px；
高度：300px；
背景颜色：绿色；
}
悬停
{
宽度：300px；
高度：300px；
背景色：红色；
}

我想你很接近了，只需要在包裹里放一个600px的容器，可以把两个300px的东西一个放在另一个下面。否则，当包裹高度设置为300px时，将不会渲染第二项

HTML:

还有，jquery：

$('.box').hover(
    function () {
        $(this).stop().animate({ 'margin-top':'-300px' }, 1000);
    },
    function () {
        $(this).stop().animate({ 'margin-top': '0px' }, 1000);
    }
);

您可以更改速度以满足您的需要…

HTML:

还有，jquery：

$('.box').hover(
    function () {
        $(this).stop().animate({ 'margin-top':'-300px' }, 1000);
    },
    function () {
        $(this).stop().animate({ 'margin-top': '0px' }, 1000);
    }
);

您可以更改速度以满足您的需要…

HTML:

jQ:

重要提示：这一款比您提供的网站上的更有效：）

HTML:

jQ:

---

重要提示：这一个比您提供的网站上的更有效：）

您能发布您迄今为止尝试过的代码吗？我想到的是这个，但它只在页面顶部有效，溢出需要修复等等。。你的意思是你想要这种滑块的算法吗？@supercolhandsomegelboy是的，这正是我想要的。你提供的网站上的一个非常混乱：快速悬停/反复解开元素，你就会看到问题；）你能发布到目前为止你尝试过的代码吗？我想到的是这个，但它只在页面顶部有效，溢出需要修复等等。。你的意思是你想要这种滑块的算法吗？@supercolhandsomegelboy是的，这正是我想要的。你提供的网站上的一个非常混乱：快速悬停/反复解开元素，你就会看到问题；）@尽管如此，如果你仔细看一下OP问题中的例子，这个例子的表现与要求的完全一样，甚至更好。示例中的文本行为有点奇怪……我喜欢它的工作方式，但我可以得到jQuery的解释吗？我不明白

在哪里显示：无源.slideIn也会消失。还有一个问题，有没有办法调整滑动速度？@user2647359ue
.slideToggle（800）和关于显示：无使用它，因此您可以滑动切换它。非常简单。@nevermind如果你仔细看一下OP问题中的例子，这个例子的表现与要求的完全一样，甚至更好。正如我所见，-element（image？）向上移动。示例中的文本行为有点奇怪……我喜欢它的工作方式，但我可以得到jQuery的解释吗？我不明白
在哪里显示：无源.slideIn也会消失。还有一个问题，有没有办法调整滑动速度？@user2647359ue
.slideToggle（800）和关于显示：无使用它，因此您可以滑动切换它。很简单。
$('.box').hover(
    function () {
        $(this).stop().animate({ 'margin-top':'-300px' }, 1000);
    },
    function () {
        $(this).stop().animate({ 'margin-top': '0px' }, 1000);
    }
);

<div class="slideContent">
    <p>Content here</p>    
    <div class="slideIn"><p>Sub Content</p></div>    
</div>

.slideContent, .slideIn{
  height:300px;
  width:180px;
}
.slideContent{
  position:relative;
  overflow:hidden;
}
.slideIn{
  position:absolute;
  left:0;
  bottom:0px;
  display:none;
}

$('.slideContent').hover(function(){
  $('.slideIn',this).stop().slideToggle();
});