Javascript 如何使div水平滑入？

How can I make a div horizontally slide in?

提问by surfbird0713

I currently have a div appearing on hover, but it just pops up rather than sliding in:

我目前有一个 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.

小提琴。

After looking through the posts on SO, I found this example, which would work if I could get it to slide in from the right instead of the bottom. I don't know much about JavaScript or jQuery so the modifications I've tried to make to this code are not producing the desired effect:

在浏览了 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.

小提琴。

I've tried reading several JavaScript articles online but they're over my head right now.

我曾尝试在线阅读几篇 JavaScript 文章，但它们现在让我无法理解。

回答by C?????N????

Based on the example you give, here's it sliding in from the right.. is this what you are after? http://jsfiddle.net/jPneT/208/

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

EDIT 2017

编辑 2017

Too much jQuery

太多的jQuery

You're right, here's a CSS alternative

你说得对，这里有一个 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>

回答by Greg

My answer uses no JavaScript. CSS can handle this automatically for you.

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

Here's a link to a fork of your code as a working example: http://jsfiddle.net/g105b/Adk8r/11/

这是一个指向您的代码分支的链接，作为一个工作示例：http: //jsfiddle.net/g105b/Adk8r/11/

There is only a little change from your example. Rather than hiding the element and showing it with displayproperty, the element is placed off-screen using right: -480px(where 480 is the cumulative width), and moving it to right: 0when the mouse hovers.

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

Using CSS transitions provides the animation, and support is very good now: http://www.caniuse.com/#search=transition

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

This technique allows all browsers back to IE6view and use your website, but users with older browsers will not have an enhanced experience. Unless you requirethe animation - as in, it is a feature for it to animate - I would suggest using CSS transitions to futureproof your website and use web standards.

这种技术允许所有浏览器返回到 IE6查看和使用您的网站，但使用旧浏览器的用户不会获得增强的体验。除非您需要动画 - 就像在动画中一样，它是一个动画功能 - 我建议使用 CSS 过渡来保证您的网站的未来发展并使用 Web 标准。

Users of deprecated browsers deserve a deprecated experience.

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

回答by Bram Vanroy

Fiddle: http://jsfiddle.net/BramVanroy/Adk8r/10/

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

As said: please learn to write logical and correct HTML. Your markup is invalidand unlogical. You should perfect your HTML and CSS and thenstudy JavaScript and jQuery rather than trying to get a hang of everything at once. This code is a pain to the eye.

正如所说：请学习编写符合逻辑且正确的 HTML。您的标记无效且不合逻辑。您应该完善您的 HTML 和 CSS，然后学习 JavaScript 和 jQuery，而不是试图立即掌握所有内容。这段代码很伤眼睛。

Here's what's wrong:

这是错误的：

• Try to avoid large chunks of inline style and JavaScript.
• You use a span where one would use a heading-tag (<h1>Welcome</h1>) and style it via CSS.

• You use line breaks <br />where one would use paragraphs:

  <p>This div appears on hover but I would like to slide in from the right instead of just appearing.</p>

• There's no structure in your code. This is not necessary to create a working website, but it's good practice to give child elements an indent of two or four spaces. This way, it's very clear for yourself which element is which child or parent. The same is true for your CSS rules: it's better to put your selector first and then the rules (indented) like so:

  h1 {
      font-weight: bold;
      font-size: 160%;
  }
  

• You have a closing </a>tag but there's no opening <a>.

• 尽量避免使用大量的内联样式和 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>。

回答by user1542036

There is a very simple way to do it using css3. instead of going through the hassle of javascript try something like in the CSS:

使用 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);
}

in the HTML:

在 HTML 中：

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

Also the translate works on an x/y axis.

平移也适用于 x/y 轴。

回答by blasteralfred Ψ

This is very simple. All you need is HTML, CSS and jQuery.

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

1. Make a solid div.
2. Make the parent div to hide overflow (overflow:hidden) in CSS.
3. Assign a margin-leftof 100% (or some length) that the required div hides away because of margin.
4. Do a jquery animate()function to bring down margin-leftto 0 or 0%.
5. You can also set the speed of animation by giving time in ms (milliseconds) or some expression like slowor fast

1. 做一个坚实的div。
2. 使父 div 隐藏overflow:hiddenCSS 中的溢出 ( )。
3. 分配margin-left100%（或某个长度）的 a 所需的 div 由于边距而隐藏起来。
4. 执行 jqueryanimate()函数以将其降低margin-left到 0 或 0%。
5. 您还可以通过以 ms（毫秒）或类似slow或fast