Question

前言：请原谅我的天真，我是网络开发的新手！

所以在my website上我的导航栏中有三个元素，所有这些元素在点击后都会切换。它现在显然还没有完成，但我试图先把它的设计搞定。我试图将某种过渡融入到切换中，也许是某种淡入，但我不确定如何继续。有没有办法在触发功能时（即出现灰色框）这样做，框会转换，而不是瞬间出现？

切换功能的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';
    }
}

我也遇到了一个问题，即最初需要两次点击才能切换显示，但我稍后会尝试解决此问题。

Answer 1

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

类似的东西：

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

Jquery：http://jquery.com/

Jquery动画：https://api.jquery.com/animate/

Answer 2

您不需要使用jQuery来创建动画。您可以通过向元素添加类来更改其状态，然后通过CSS添加动画来实现此目的以下是a tutorial关于如何正确处理您所寻找的内容如果您不想自己创建动画，可以使用animate.css

之类的内容

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

2 个答案: