Javascript 切换元素时如何进行转换？

前言：请原谅我的幼稚，我是网络开发新手

因此，在我的导航栏中有三个元素，单击后所有元素都会切换。很明显现在还没有完成，但我正试着先把它的设计拿下来。我试图在切换中加入某种过渡，可能是某种淡入，但不确定如何继续。当功能被触发（即出现灰色方框）时，是否有办法使方框转换，而不是立即出现

切换函数的Javascript如下所示：

function toggle_visibility(x, y, z) { 

    /* Each variable stores one of the 3 elements that are on the navbar */
    var a = document.getElementById(x); 
    var b = document.getElementById(y); 
    var c = document.getElementById(z);

    if (a.style.display == 'none') { 
        a.style.display = 'block'; 
        b.style.display = 'none';
        c.style.display = 'none';
    } else {
        a.style.display = 'none';
    }
}

---

我也有一个问题，它需要两次点击切换显示最初，但我会尝试修复后

考虑使用jquery。它使过渡和动画变得更加容易

比如：

$("#ToggleID/.Class").hover(function(){
      $("#ToggleID/.Class").show(`duration of the animation`);
});

Jquery：

---

Jquery动画：

您不需要使用Jquery来创建动画。您可以通过向元素添加类来更改其状态，然后通过CSS添加动画来完成此操作。
下面介绍如何准确地完成您想要的任务。

---

如果你不想自己创建动画，你可以使用类似于

的东西，你可以用

CSS

来做任何事情，如果你想使用一些脚本，我认为你应该尝试使用

jQuery

（一个非常流行的用于web开发的javascript库）它支持很多东西，包括转换…不要尝试自己实现这样的东西，尤其是作为一个初学者-而是使用像f.e.jQuery这样的框架和它为这种情况提供的方法（fadeIn，fadeOut）。现在days是一个非常强大的工具，有了jquey，你可以简单地这样做来添加效果：

$“#mydiv”）.fadeIn（）

和jQuery注释…不要使用

onclick

html属性。你应该保留你的javascript这不是一个很好的答案，考虑到：OP没有指定他想要使用jQuery，你没有显示任何示例，这基本上只是对上述注释的重述。