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完成。您需要做的是使用超时/间隔更改css属性逐渐。 JQuery让你很容易。

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

例如，

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

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

在 Javascript 中，您必须使用间隔。

使用Javascript切换动画

1 个答案: