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

我目前正在使用网络教程中找到的以下代码来显示/隐藏 DIV。效果很好，但不喜欢这种效果。希望 DIV 淡入/淡出（或者更平滑的东西，目前 DIV 是从右上角增长的）。我该如何调整代码来做到这一点？你可以在这里看到它http://jsfiddle.net/Grek/w4HWn/1/ 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);
          }
     });
}

只是改变.hide() to .fadeOut() and .show() to .fadeIn()

但看看你的例子，你可以通过使用数据属性来简单得多。

看看这个example http://jsfiddle.net/w4HWn/13/.

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