使用 Javascript 切换动画

Question

我的代码中有一个切换 Javascript，当单击 html 代码中的链接时，它会显示和隐藏两个不同的 div：

function toggleAbout() {
    var ele = document.getElementById("toggleAbout");
    var text = document.getElementById("displayAbout");
    var eleContatti = document.getElementById("toggleContatti");
    if(ele.style.display == "block") {
        ele.style.display = "none";
        text.innerHTML = "About";
    }
    else {
        ele.style.display = "block";
        text.innerHTML = "About";
        eleContatti.style.display = "none";
    }
}

function toggleContatti() {
    var ele = document.getElementById("toggleContatti");
    var text = document.getElementById("displayContatti");
    var eleAbout = document.getElementById("toggleAbout");
    if(ele.style.display == "block") {
        ele.style.display = "none";
    }
    else {
        ele.style.display = "block";
        eleAbout.style.display = "none";
    }
}

但是，我想为 div 设置动画，使它们从上到下缓慢滚动，而不是在单击链接时直接完全显示它们。我看过很多切换动画的例子，但不知道如何将它们集成到我已经拥有的代码中。我从未使用过 Javascript，但网站需要它，该怎么做？

Answer 1

我也建议使用 JQuery，但也可以使用 javascript 来完成。您需要做的是使用 timeouts/intervals逐渐更改 css 属性。 JQuery 让这一切变得简单。

$('#selector').animate({'height':'100px'}) 

例如，将逐渐增加/减少带有 id 选择器的元素的高度，直到达到 100 像素。这给出了动画的效果。

对于幻灯片和淡入淡出，您可以分别更改位置和不透明度。

在 Javascript 中，您必须使用 Intervals。