使用Java進行Div過渡

Question

我是html和javascript的新手。 幾天前，有人為我提供了javascript，它基本上會打開一個隱藏的DIV，而當其他DIV打開時，第一個打開的DIV將自動關閉。 但是現在我遇到了另一個問題，這使我無法產生過渡效果。 我想要在此代碼中進行過渡。 請幫忙！！！

這是JAVASCRIPT：

var divs = ["div1", "div2", "div3", "div4", "div5", "div6", "div7", "div8"];
var visibleDivId = null;

function toggleVisibility(divId) {

    if (visibleDivId === divId) {
        visibleDivId = null;
    } else {
        visibleDivId = divId;
    }
    hideNonVisibleDivs();
}

function hideNonVisibleDivs() {
    var i, divId, div;
    for (i = 0; i < divs.length; i++) {
        divId = divs[i];
        div = document.getElementById(divId);
        if (visibleDivId === divId) {

            div.style.display = "block";

        } else {
            div.style.display = "none";
        }
    }
}

HTML如下所示：

<div id="div1" onClick="toggleVisibility('div1');return false;">
<div id="div2" onClick="toggleVisibility('div2');return false;">

等等。

我已經嘗試了所有可能的方法，但是沒有完美的方法來達到這種效果。 我希望將div隱藏起來，當單擊導航時，div應該以其內容打開並帶有過渡。 謝謝 ：）

Answer 1

嘗試使用CSS過渡 。 例如，這將使您的div在兩秒鍾內從折疊狀態過渡到打開狀態：

#div1 {
    transition: height 2s;
    -moz-transition: height 2s; /* Firefox 4 */
    -webkit-transition: height 2s; /* Safari and Chrome */
    -o-transition: height 2s; /* Opera */
}

我不知道JavaScript，但是默認情況下您會用它來隱藏div，然后在懸停或單擊或您決定執行的任何操作時，使其相對於其各自的狀態顯示/隱藏div。

Answer 2

正如TylerH在評論中指出的，最好的方法是使用CSS過渡：

#mydiv { transition: opacity 2s; }
.hidden { opacity: 0; }

javascript的作用可能只是在您要隱藏的元素上切換類.hidden ：

document.getElementById("mydiv").classList.toggle("hidden");

參見小提琴上的工作示例

您無法通過設置display屬性來實現它，因為none和block之間沒有過渡。 您可以像在hideNonVisibleDivs()那樣遍歷所有div，並將其與小提琴代碼放在一起。

Answer 3

您可以使用Jquery動畫

<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script> <--- this will add Jquery

$("div").onclick(function(){
  $(this.attr("id")).fadeIn(1000); <--- this is the animation
});

或者如果您願意，可以使用動畫功能

https://api.jquery.com/animate/