javascript - 如何使div水平滑入？

我目前有一个div出现在悬停上，但它只是弹出而不是滑入:

#home-heroImage{padding: 0px;
margin: 0px auto;
width:980px;
height: 525px;
position: relative;
z-index: 1;
    background-color: #fcba2e;
}#home-hero-pop{background-color: #ffffff;
opacity:0.8;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
filter: alpha(opacity=80);
font: 16px Helvetica,Arial,sans-serif;
font-weight: bold;
color: #6d6e70;
text-align: left;
padding: 10px;
position: absolute;
right: 0px;
top: 0px;
height: 505px;
width: 460px;
z-index: 2;
}

Fiddle。

看完SO上的帖子后，我发现了这个示例，如果我能使其从右侧而不是底部滑入，该示例将起作用。我对JavaScript或jQuery不太了解，因此我尝试对此代码进行的修改未产生预期的效果:

$(document).ready(function(){
    $('.up-down').mouseover(function(){
        $('.default').stop().animate({
            height: 0
        }, 200);
    }).mouseout(function(){
        $('.default').stop().animate({
            height: 200
        }, 200)
    })

});

Fiddle。

我已经尝试过在线阅读几篇JavaScript文章，但现在这些文章已经超出了我的理解范围。

最佳答案

根据您提供的示例，它是从右侧滑入的。.这是您的要求吗？ http://jsfiddle.net/jPneT/208/

编辑2017



您是对的，这是CSS的替代方法

.left-right {
    overflow:hidden;
    height:200px;
    width:200px;
    position:relative;
    background-color:#333;
}
.slider {
    width:200px;
    height:200px;
    position:absolute;
    top:0;
    right:-200px;
    background-color:#000;
    color:#fff;
    transition:0.4s ease;
}

.left-right:hover .slider {
  right:0;
}

<div class="left-right">
  <div class="slider">Welcome !</div>
</div>