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

Question

看到这个幻灯片在 CodePen 上显示效果，我想知道是否有人可以帮助我使用 jQuery 重新创建它？效果可以在here找到。虽然我了解 CSS 发生了什么，但我想使用 jQuery/JavaScript 创建这种效果。

HTML：

    <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>

CSS：

    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;
}

Answer 1

我同意您应该发布您的尝试。这是一个简单的开始：

http://jsfiddle.net/isherwood/9Lwk8/

.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();
});

要让文本 div 从上方滑入，您需要设置 margin-top 或类似的动画。 jQuery 有很好的文档，所以看看。