javascript jQuery 向下滑动切换，不可能？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4616857/
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
jQuery slide down toggle, impossible?
提问by Kirk Strobeck
I want to do a slide down with jQuery, but I can't find it anywhere.
我想用 jQuery 向下滑动，但在任何地方都找不到。
I do notwant it to scale as it slides
I do want it to perform this action( click slide ), but vertically down, not horizontally right.
我不希望它在滑动时缩放
我确实希望它执行此操作（单击幻灯片），但垂直向下，而不是水平向右。
UPDATE :
更新 ：
So here's the final functional code!
所以这是最终的功能代码！
$(this).toggle(
"slide",
{
direction: 'up',
duration: 'slow',
easing: 'easeOutQuart'
}
);
采纳答案by Dr.Molle
Read the API-Docs: http://docs.jquery.com/UI/Effects/Slide
阅读 API 文档：http: //docs.jquery.com/UI/Effects/Slide
You can Slide in every direction using the direction-option.
您可以使用方向选项向各个方向滑动。
Demo: http://www.jsfiddle.net/doktormolle/befbE/(I set the width/height of the image inside the sliding element to 100%, so you can see, the image is not scaled, it's clipped, guess that's what you are looking for)
演示：http: //www.jsfiddle.net/doktormolle/befbE/（我把滑动元素里面的图片的宽/高设置为100%，所以你可以看到，图片没有缩放，它被剪裁了，猜猜是你在找什么）
回答by Richard Marskell - Drackir
回答by Wazy
Consideryour imageof height 150px
考虑您的高度 150像素的图像
First apply height="0"
首先应用高度=“0”
Use animateto achieve slide downeffect
使用animate实现下滑效果
<img src="http://www.google.com/images/nav_logo29.png" id="image_scale" width="200" height="0" />
<script>
$(document).ready(function(){
$("#image_scale").animate({height:"150px"},"5000");
});
</script>
回答by Carsen
Absolutely position the element you are wanting to slide in and out and use .animate() to change it's position. You can have it slide in from the top, bottom, left, right, on the diagonal or however you want with this method.
绝对定位您想要滑入和滑出的元素，并使用 .animate() 更改它的位置。您可以使用此方法从顶部、底部、左侧、右侧、对角线或任何您想要的方式将其滑入。
回答by Yoram de Langen
If you want it the make own ur you, can you use .animate()and you using css.
如果你想要它自己的你，你可以使用.animate()和你使用 css。
something like:
就像是：
css:
css：
#elm { width: 150px; height: 80px; position: absolute; left: -150px; }
script:
脚本：
// let it animate
$('#elm').animate({ display: 'block', left: 0 }, 'fast');
else if you dont wanna make it on your own, use that jQuery UI 'slide' effect?
否则，如果您不想自己制作，请使用 jQuery UI 'slide' 效果？
回答by diagonalbatman
I know what you mean - the items inside the DIV or whatever you are animating look like they are squahsed, and then expand.
我知道你的意思 - DIV 内的项目或你正在制作动画的任何东西看起来像是被压扁了，然后展开。
Maybe consider hiding the element behind another and either move the masking element up and out of the way or slide the hidden element down using .animate()?
也许考虑将元素隐藏在另一个元素后面，或者将屏蔽元素向上移开，或者使用 .animate() 向下滑动隐藏元素？
jQuery .click .animate to move down, then back up
jQuery .click .animate 向下移动，然后再向上移动
This may help.
这可能会有所帮助。
回答by Josiah Ruddell
You can easily achieve this with an inner container that has fixed dimentions.
您可以使用具有固定尺寸的内部容器轻松实现这一点。
See this live example. In the fiddle, the first divis without the inner container.
请参阅此实时示例。在小提琴中，第一个div是没有内部容器。
This way when the outer container animates (width/height) the inner container does not grow, simply reveals.
这样，当外部容器动画（宽度/高度）时，内部容器不会增长，只是显示.
