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 transitions。例如，这将使您的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");

参见工作示例on the fiddle

您无法通过设置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/

用Javascript转换Div

3 个答案: