Javascript 如何使 DIV 滑入和滑出？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4590403/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I make a DIV slide in and out?
提问by Jeddizero
I am currently learning jQuery. I'd like to know how to make an image slide in when you click on its edge, then click again and it slides away. Similar to this:
我目前正在学习jQuery。我想知道如何使图像在单击其边缘时滑入，然后再次单击它就会滑开。与此类似：
If you see the right hand side and click, there is the effect that i'm looking for. I assume this will involve making a div and giving it a background image then using some jquery to make the div slide into view. Of course the div could have other content such as html. Any ideas?
如果您看到右侧并单击，就会出现我正在寻找的效果。我认为这将涉及制作一个 div 并为其提供背景图像，然后使用一些 jquery 使 div 滑入视图。当然，div 可以有其他内容，例如 html。有任何想法吗？
Would the .slideDown() method work?
.slideDown() 方法会起作用吗？
采纳答案by Praneeth
if you want a div to slideDown() first it has to hidden.
so use $("#div_Id").hide();after that use $("#div_Id").slideDown('slow');
this will work
如果你想要一个 div 到 slideDown() 首先它必须隐藏。所以在使用$("#div_Id").hide();后使用$("#div_Id").slideDown('slow')；这会起作用
回答by Vadim
Check out slideToggle
查看幻灯片切换
回答by Jeddizero
Here's what i have so far:
这是我到目前为止所拥有的：
$(document).ready(function() {
$('.inner').hide();
$("button").click(function() {
$("#static_image").hide();
$('.inner').slideToggle(300);
});
});
So basically the animated div begins hidden. There's another div with a background image that is lined up to look as if the animated div is still sticking out a bit. Then clicking a button makes the static div dissapear and the animated div slide into view. However i'm not sure how to make the timing perfect so it's smooth and people won't know there are two divs. The animated div takes a fraction of a second to move up to where the div with the static image was, however the static images disappears immediately leaving a non-smooth animation.
所以基本上动画div开始隐藏。还有另一个带有背景图像的 div，它排列起来看起来好像动画 div 仍然有点突出。然后单击一个按钮使静态 div 消失，动画 div 滑入视图。但是我不确定如何使时间完美，所以它很流畅，人们不会知道有两个 div。动画 div 需要几分之一秒才能移动到带有静态图像的 div 所在的位置，但是静态图像立即消失，留下不平滑的动画。
One other thing, how do i get the static image div to return at the moment that the animated div moves back down after a user click? It can't be at the exact moment the user clicks 'retract' button else it'd definitely appear before it's supposed to.
另一件事，如何在用户单击后动画 div 向下移动时让静态图像 div 返回？它不能在用户点击“撤回”按钮的确切时刻，否则它肯定会在它应该出现之前出现。
回答by Albinoswordfish
In order to use the animate()function add a CSS class to the <div>tag that has a height attribute, it can either be in pixels or %, this will be the initial height. After that then you can use the animate().
为了使用该animate()函数向<div>具有高度属性的标签添加一个 CSS 类，它可以以像素或 % 为单位，这将是初始高度。之后，您就可以使用animate().
$('#mydiv').animate({
height: 500px
}, 5000, function() {
// Animation complete.
});
This will slide the div to 500px, which will take 5 seconds.
这会将 div 滑动到 500px，这将需要 5 秒。
