如何使 div 水平滑入？答案

【问题标题】：How can I make a div horizontally slide in?如何使 div 水平滑入？
【发布时间】：2012-07-28 08:45:26
【问题描述】：

我目前有一个 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 文章，但现在我无法理解。

【问题讨论】：

我也创建了这个，但不确定为什么它不起作用：jsfiddle.net/v5E3M
无效标记和元素属性中的所有 JavaScript？ I'll pass
这里：jsfiddle.net/TaXj9（从右到左，而不是从下到上）
谢谢你，我很感激。 @Matt，我想到了将 JavaScript 放在这个论坛的元素中，我认为这也是一种奇怪的方法，但它确实有效，所以我接受了它。对我的标记的任何反馈将不胜感激，有助于学习过程。

标签： javascript jquery animation hover effects

【解决方案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>

【讨论】：

是的，感谢您的热情回复并提供解决方案。
@Greg 没有太多 jquery ;) ;)
是否有无需触发器即可启动动画的 CSS 解决方案？我的意思是，是否可以在页面加载后才开始动画？

【解决方案2】：

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

以下是您的代码分支的链接作为工作示例： http://jsfiddle.net/g105b/Adk8r/11/

与您的示例只有一点点变化。不是隐藏元素并使用display 属性显示它，而是使用right: -480px（其中480 是累积宽度）将元素放置在屏幕外，并在鼠标悬停时将其移动到right: 0。

使用CSS转场提供动画，现在支持很好：http://www.caniuse.com/#search=transition

此技术允许所有浏览器回到 IE6 查看和使用您的网站，但使用旧浏览器的用户不会获得增强的体验。除非您需要动画 - 例如，它是动画的一项功能 - 我建议使用 CSS 过渡来确保您的网站不会过时并使用网络标准。

弃用浏览器的用户应该得到弃用的体验。

【讨论】：

如何说支持非常好？ IE8 的份额是巨大的，它不支持 CSS3 动画。他可以尝试 CSS3 动画，但我肯定会建议使用 JS（最好是 jQuery）后备。此外，在其他人的解决方案上发布 cmets（对跨浏览器更友好）也相当乏味。
此技术允许所有浏览器返回 IE6 查看和使用您的网站，但使用旧浏览器的用户不会获得增强的体验。
是的，使用 IE9 之前浏览器的用户会看到一个切换的 div。不过，TS 的问题是摆脱这个简单的切换，并用幻灯片代替它。您确实可以使用 CSS3 来执行此操作，但仅适用于现代浏览器而不适用于 IE8。用户将体验到没有转换的切换，这是 TS不想要的。那为什么要提出他不想要的东西。我不同意你的最后一句话。 XP 用户被 IE 8 卡住了，它不支持您的建议。

【解决方案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>。

【讨论】：

我的第一个小提琴中的标记有什么问题？我很感激任何反馈，这样我就可以学会正确地做到这一点。我只在我的小提琴中放了部分代码，这样你就不必为整个页面而烦恼，也许这就是问题所在？
感谢您的澄清。一些问题是由于将页面的大块复制并粘贴到 jsfiddle 中造成的，但 H1、br 和内联样式确实是我需要采用的最佳实践。感谢您的帮助。
注意：要获得列表项内的块代码格式，您需要缩进两次。我不知道为什么，但我认为这是标准的 Markdown 语法。

【解决方案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 轴。

【讨论】：

【解决方案5】：

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

制作一个实心的 div。
使父 div 隐藏 CSS 中的溢出 (overflow:hidden)。
分配一个 100%（或某个长度）的 margin-left，使所需的 div 因边距而隐藏起来。
执行 jquery animate() 函数将 margin-left 降低到 0 或 0%。
您还可以通过以毫秒（毫秒）或slow 或fast 等表达式给出时间来设置动画的速度

【讨论】：