如何让div水平滑入？

Question

我现在有一个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;
}

小提琴.

在浏览了SO上的帖子之后,我找到了这个例子,如果我可以让它从右边而不是从底部滑入,它会起作用.我对JavaScript或jQuery了解不多,所以我试图对这段代码进行的修改并没有产生预期的效果:

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

});

小提琴.

我曾尝试在线阅读几篇JavaScript文章,但现在它们已经超出了我的想象.

Answer 1

根据你给出的例子,这里是从右边滑入..这就是你所追求的？http://jsfiddle.net/jPneT/208/

编辑2017

太多的jQuery

你是对的,这是一个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>

Answer 2

我的回答不使用JavaScript.CSS可以自动为您处理.

这是一个代码分叉的链接作为一个工作示例:http: //jsfiddle.net/g105b/Adk8r/11/

你的例子只有一点变化.不是隐藏元素并使用display属性显示元素,而是使用right: -480px(其中480是累积宽度)将元素放置在屏幕外,并right: 0在鼠标悬停时将其移动到.

使用CSS过渡提供动画,现在支持非常好:http://www.caniuse.com/#search=transition

此技术允许所有浏览器返回到IE6视图并使用您的网站,但使用旧浏览器的用户将无法获得增强的体验.除非您需要动画 - 例如,它是动画的一个功能 - 我建议使用CSS过渡来保护您的网站并使用Web标准.

不推荐使用的浏览器的用户应该获得弃用的体验.