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

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文章，但现在他们已经超出了我的想法。

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过渡来保护你的网站并使用网络标准。

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

Answer 3

小提琴：http://jsfiddle.net/BramVanroy/Adk8r/10/

如上所述：请学习编写逻辑正确的HTML。您的标记无效和非逻辑。您应该完善您的HTML和CSS，然后然后学习JavaScript和jQuery，而不是试图立即获取所有内容。这段代码令人痛苦。

这是错的：

尽量避免大量的内联样式和JavaScript。
您使用跨度，其中人们将使用标题标记（<h1>Welcome</h1>）并通过CSS设置样式。
您可以使用换行符<br />，其中一个会使用段落：

<p>This div appears on hover but I would like to slide in from the right instead of just appearing.</p>
您的代码中没有结构。这不是创建工作网站所必需的，但最好给子元素一个两个或四个空格的缩进。通过这种方式，您自己清楚哪个元素是哪个子元素或父元素。您的CSS规则也是如此：最好先放置您的选择器，然后再放置规则（缩进），如下所示：
```
h1 {
    font-weight: bold;
    font-size: 160%;
}
```
您有一个结束</a>标记，但没有开放<a>。

Answer 4

使用css3有一种非常简单的方法。而不是经历javascript的麻烦尝试类似CSS中的内容：

div.move {
  height: 200px;
  width: 200px;
  background:#0000FF;
  color:#FFFFFF;
  padding:10px;
}

/*on mouse hover*/
div.move:hover {
  /*General*/
  transform:translate(200px,100px);
  /*Firefox*/
  -moz-transform:translate(200px,200px);
  /*Microsoft Internet Explorer*/
  -ms-transform:translate(200px,100px);
  /*Chrome, Safari*/
  -webkit-transform:translate(200px,100px);
  /*Opera*/
  -o-transform:translate(200px,100px);
}

HTML中的

：

<div class="move">Anything is here moves!</div>

此外，翻译也适用于x / y轴。

Answer 5

这很简单。您只需要HTML，CSS和jQuery。

做一个坚实的div。
使父div在CSS中隐藏溢出（overflow:hidden）。
指定margin-left 100％（或一定长度），因为保证金，所需的div会隐藏。
执行jquery animate()函数以将margin-left降低到0或0％。
您还可以通过以毫秒（毫秒）或某个表达式（如slow或fast

如何让div水平滑入？

5 个答案: