javascript 隐藏/显示 DIV - 将当前效果更改为淡入淡出
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11925772/
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
Hide/show DIVs - change current effect to fade
提问by Greg
I'm currently using the code below found on web tutorial to show/hide DIVs. It works great but don't like the effect. Would like the DIVs to fade in / fade out instead (or something smoother, for the moment the DIVs are growing from the top-right corner). How could I adapt the code to do this? Youc ans ee it here http://jsfiddle.net/Grek/w4HWn/1/Many thanks
我目前正在使用以下网络教程中的代码来显示/隐藏 DIV。它工作得很好，但不喜欢效果。希望 DIV 淡入/淡出（或者更平滑的东西，目前 DIV 从右上角开始增长）。我怎样才能修改代码来做到这一点？你可以在这里看到它http://jsfiddle.net/Grek/w4HWn/1/非常感谢
function showonlyone(thechosenone) {
$('.textzone').each(function(index) {
if ($(this).attr("id") == thechosenone) {
$(this).show(2000);
}
else {
$(this).hide(2000);
}
});
}
回答by Moin Zaman
Just change .hide()to .fadeOut()and .show()to .fadeIn()
只需更改.hide()为.fadeOut()和.show()为.fadeIn()
But looking at your example, you could do it much simpler by using data attributes.
但是看看你的例子，你可以通过使用数据属性来简单得多。
Have a look at this example.
看看这个例子。
You may need absolute positioning or some other technique because the two divs stack up while fading in and out.
您可能需要绝对定位或其他一些技术，因为两个 div 在淡入淡出时堆叠在一起。
回答by undefined
You can use fadeInand fadeOutmethods, you can also minify the code, try the following:
您可以使用fadeIn和fadeOut方法，也可以缩小代码，尝试以下操作：
function showonlyone(thechosenone) {
$('.textzone').fadeOut();
$('#'+thechosenone).fadeIn();
}
当您使用 jQuery 时，您可以使用 jQuery
clickclick处理程序：HTML:
HTML：
<div class="source-title-box"><span class="activity-title"><a href="#source-region">Our region</a></span></div>
<div class="source-title-box"><span class="activity-title"><a href="#source-oursource">Our source</a></span></div>
jQuery:
jQuery：
$('.activity-title a').click(function(e){
e.preventDefault()
var thechosenone = $(this).attr('href');
$('.textzone').fadeOut(600, function(){
$(thechosenone).fadeIn(600);
});
})
