Javascript 显示带有动画的隐藏 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14335501/
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
Show hide div with animation
提问by user1632298
I made this script, which opens a div with the right class and close the others.
我制作了这个脚本，它用正确的类打开一个 div 并关闭其他类。
function showhide(id) {
if (document.getElementById) {
var divid = document.getElementById(id);
var divs = document.getElementsByClassName("hideable");
for (var i = 0; i < divs.length; i = i + 1) {
divs[i].style.display = "none";
}
divid.style.display = "block";
}
return false;
}
Is it possible to make some animation, like fadout, easeout instead of just showing it by display options?
是否可以制作一些动画，例如淡出、淡出，而不是仅通过显示选项显示？
采纳答案by yogi
You could try this
你可以试试这个
function showhide(id) {
if (document.getElementById) {
var divid = document.getElementById(id);
var divs = document.getElementsByClassName("hideable");
for (var i = 0; i < divs.length; i = i + 1) {
$(divs[i]).fadeOut("slow");
}
$(divid).fadeIn("slow");
}
return false;
}
Have a look at this fiddle "http://jsfiddle.net/9jtd3/"
看看这个小提琴“ http://jsfiddle.net/9jtd3/”
There are many more techniques provided by Jquery library, You should have a look at that too.
Jquery 库提供了更多技术，您也应该看看。
回答by Arun Kasyakar
You can use slideDown() and slidUp()of jQuery
你可以使用slideDown() and slidUp()jQuery
$( document.body ).click(function () {
if ( $( "div:first" ).is( ":hidden" ) ) {
$( "div" ).slideDown( "slow" );
} else {
$( "div" ).slideUp("slow");
}
});
回答by imVJ
回答by Saju
If You are using Jquery then another way to do this is
如果您使用的是 Jquery，那么另一种方法是
function showhide(id) {
$(".hideable".fadeOut("slow");
$("#" + id).fadeIn("slow");
}
Assuming "hideable" as className in your group of divs
假设您的 div 组中的“可隐藏”为 className
Good luck.
祝你好运。
回答by codedude
This is way easier with only CSS.
仅使用 CSS 就更容易了。
You make a class
你做一堂课
div {
display:block;
transition: all .2s ease-out;
}
.hidden {
display:none;
}
And with javascript, you apply or remove the class hidden when you want to. jQuery animation lib is wayyyy far from good to be used. It's clunky, and ressource eating for your user. CSS works with your GPU instead, allowing a more fluid animation.
使用 javascript，您可以在需要时应用或删除隐藏的类。jQuery 动画库远不能很好地使用。它很笨重，并且为您的用户消耗资源。CSS 与您的 GPU 一起工作，允许更流畅的动画。
