Javascript 隐藏/显示DIVs-将当前效果更改为淡入淡出

我目前正在使用下面在web教程中找到的代码来显示/隐藏div。它工作得很好，但不喜欢效果。希望div淡入/淡出（或者更平滑的东西，目前div从右上角开始增长）。我如何调整代码来实现这一点？你可以在这里看到它非常感谢

function showonlyone(thechosenone) {
     $('.textzone').each(function(index) {
          if ($(this).attr("id") == thechosenone) {
               $(this).show(2000);
          }
          else {
               $(this).hide(2000);
          }
     });
}

只需将

.hide（）

更改为

.fadeOut（）

并将

.show（）

更改为

.fadeIn（）

但是看看您的示例，通过使用数据属性，您可以做得更简单

看看这个

您可能需要绝对定位或其他一些技术，因为两个div在淡入淡出时会堆叠起来。

只需将

.hide（）

更改为

.fadeOut（）

和

.show（）

更改为

.fadeIn（）

但是看看您的示例，通过使用数据属性，您可以做得更简单

看看这个

---

您可能需要绝对定位或其他技术，因为两个div在淡入淡出时会叠加。

您可以使用

fadeIn

和

fadeOut

方法，也可以缩小代码，尝试以下操作：

function showonlyone(thechosenone) {
     $('.textzone').fadeOut();
     $('#'+thechosenone).fadeIn();
}

---

使用jQuery时，可以使用jQuery

单击处理程序：

HTML:

您可以使用
fadeIn
和
fadeOut
方法，也可以缩小代码，请尝试以下操作：

function showonlyone(thechosenone) {
     $('.textzone').fadeOut();
     $('#'+thechosenone).fadeIn();
}


使用jQuery时，可以使用jQuery
单击处理程序：

HTML:

将
.show（）.hide（）
更改为
.fadeIn（）.fadeOut（）
是否使用each循环仅用于查找具有特定id的元素？尝试了解文档和网站上可爱的搜索功能谢谢，我尝试过，但在现阶段这对我来说太技术化了，但是，我一定会努力提高我的js技能。show（）.hide（）
到
.fadeIn（）.fadeOut（）
你使用each循环只是为了找到一个具有特定id的元素吗？尝试了解文档和网站上可爱的搜索功能谢谢，我尝试过了，但在现阶段这对我来说太技术化了，但我一定会努力提高我的js技能。我试过dreamweaver告诉我你的代码无效并且不工作（如果原始代码在这里有帮助的话）嗨Raminson，非常感谢你的详细回答。不幸的是，这不起作用，可能是因为我已经在使用div在页面之间导航了（请参见您的代码在这里的“源代码”）谢谢Ramison。我试过dreamweaver告诉我你的代码无效并且不工作（如果原始代码在这里有帮助的话）嗨Raminson，非常感谢你的详细回答。不幸的是，这不起作用，可能是因为我已经在使用div在页面之间导航了（请参阅您的代码在这里的“源代码”）谢谢Moin。不幸的是，这不起作用，可能与Raminson的代码也不起作用的原因相同（我的网站是一个单独的页面，每个页面都有一个单独的div-请参阅此处的网站）@Greg：请参阅另一个更新的示例。
#
使页面跳转到顶部。您好，莫因，不知什么原因，您的代码在JSFIDLE中有效，但在我的网站上无效。查看更新代码的网站：谢谢Moin。不幸的是，这不起作用，可能与Raminson的代码也不起作用的原因相同（我的网站是一个单独的页面，每个页面都有一个单独的div-请参阅此处的网站）@Greg：请参阅另一个更新的示例。
#
使页面跳转到顶部。您好，莫因，不知什么原因，您的代码在JSFIDLE中有效，但在我的网站上无效。查看包含更新代码的网站：
$('.activity-title a').click(function(e){
    e.preventDefault()
     var thechosenone = $(this).attr('href');
    $('.textzone').fadeOut(600, function(){
         $(thechosenone).fadeIn(600);
    });   
})