0

我的代码中有一个切换 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，但是网站需要这个，怎么做？

4

1 回答 1

0

我也建议使用 JQuery，但也可以使用 javascript 来完成。您需要做的是使用timeouts/intervals逐渐更改 css 属性。JQuery 使这对您来说很容易。

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

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

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

在Javascript中，您必须使用Intervals。

于 2012-12-28T16:04:46.443 回答