尝试使用jQuery而不是CSS3重新创建效果

看到CodePen上的这个向下滑动显示效果，我想知道是否有人可以帮助我使用jQuery重新创建它？这种影响是可以发现的。虽然我了解CSS的情况，但我希望使用jQuery/JavaScript创建这种效果

HTML:

---

我同意你应该公布你的尝试。以下是一个简单的开始：

.wrapper{
宽度：200px；
}
.wrapper>div{
高度：200px；
}
.文本{
显示：无；
背景色：#eee；
溢出：隐藏；
}
一些文本
$（'.wrapper'）.hover（函数（）{
$（'.image'）.slideUp（）；
$（'.text'）.slideDown（）；
}，函数（）{
$（'.image'）.slideDown（）；
$（'.text'）.slideUp（）；
});

---

要使文本div从上方滑入，您需要设置边距顶部或类似的动画。jQuery有很好的文档，请看一看

出于好奇，如果您了解它在CSS中是如何工作的，并且它确实按照您的意愿工作，那么您为什么要在jQuery中实现它呢？我想，1）我想在JS方面做得更好2）我需要在旧浏览器上做同样的工作。但实际上，我想更好地编写JS，因为您没有提供任何代码尝试。。。看起来你想让某人为你创建它。在这方面你学到了什么？jQuery中的幻灯片方法是你应该开始的地方，但是CSS是一个简单得多的解决方案。如果你想在JS方面做得更好，要求人们“帮助我用jQuery重新创建它”并不能帮助你做得更好。先自己试一试，然后带着具体问题过来。不，我试过了。。。我可能没有复制我做过的任何代码，但是再一次。。。我写的很多代码。。。见鬼，看起来像是鸡抓。不会学习复制其他代码，但当你不知道从哪里开始或有任何线索。。。这使它变得更加困难。谢谢@ChrisWillard指着我的方向。谢谢@isherwood。最后一件事，在启动和重置动画边距顶部时，使用mouseenter和mouseleave是否正确？“.hover（）方法绑定mouseenter和mouseleave事件的处理程序。您可以使用它在鼠标位于元素内期间将行为应用于元素。”

    <section>
    <div id="icon-wrapper">
        <a href="map.html">
            <div class="icons">
                <div class="icon-slide-container">
                    <img class="slide-icon"  alt="The Kite Map Logo" height="100" src="http://thekitemap.com/images/slide/view-map.jpg">
                </div>
            </div>
        </a>
    </div>
</section>

    body{
  background:#eeeeee;
}

section{
    float: left;
    padding-top: 50px;
    padding-bottom: 100px;
    width: 100%;
    padding-left:0;
    padding-right:0;
}

#icon-wrapper{
    width:100%;
    float:left;
    height:300px;
}

.icons {
    width:25%;
    float:left;
    position:relative;
}

.icon-slide-container{
    height:300px;
    overflow:hidden;
    text-align: left;
    position: absolute;
    float: left;
    width: 300px;
    left: 50%;
    margin-left: -150px;
}

.slide-icon{
    width:300px;
    height:auto;
    position:absolute;
    margin-top:-300px;
    -webkit-transition:.4s ease;
    -moz-transition:.4s ease;
    -ms-transition:.4s ease;
    -o-transition:.4s ease;
    transition:.4 ease;
}

.slide-icon:hover{
    position:absolute;
    margin-top:0;
}

.wrapper {
    width: 200px;
}
.wrapper > div {
    height: 200px;
}
.text {
    display: none;
    background-color: #eee;
    overflow: hidden;
}

<div class="wrapper">
    <div class="text">
         <h1>Some text</h1>
    </div>

    <div class="image">
        <img src="http://placekitten.com/200/200" />
    </div>
</div>

$('.wrapper').hover(function () {
    $('.image').slideUp();
    $('.text').slideDown();
}, function () {
    $('.image').slideDown();
    $('.text').slideUp();
});